:root{
    --ink:#111111;
    --ink-soft:#1c1c1c;
    --line-on-ink:#333333;
    --paper:#ffffff;
    --steel:#f4f3f0;
    --orange:#ff6a13;
    --orange-deep:#c94e00;
    --orange-glow:#ffb27a;
    --text-muted:#6b6b68;
    --radius:2px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1.05;
    font-weight:700;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:600;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{list-style:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  button{font-family:inherit;cursor:pointer;border:none;}

  /* ---------- Thread divider (signature element) ---------- */
  .thread{
    width:100%;
    height:14px;
    display:block;
  }
  .thread path{
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
  }
  .thread.on-light path{stroke:#d8d6d0;}
  .thread.on-dark path{stroke:#3a3a3a;}
  .thread.on-orange path{stroke:#ff9142;}

  /* ---------- Nav ---------- */
  header{
    position:sticky;top:0;z-index:100;
    background:#111111;
    border-bottom:1px solid var(--line-on-ink);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 28px;max-width:1180px;margin:0 auto;
  }
  /* El logo arranca como texto estilizado ("BULONEX" + tagline). Si guardás el archivo
     real en images/logo.png (o logo.svg, cambiando la extensión en el <img> del HTML),
     la imagen lo reemplaza sola, escalada a la altura de la barra — no hace falta
     tocar nada más. Si el archivo no existe, sigue mostrando el texto como ahora. */
  .logo{
    display:flex;align-items:center;
  }
  .logo-img{display:none;max-height:42px;width:auto;}
  .logo-img.loaded{display:block;}
  .logo-img.loaded + .logo-text{display:none;}
  .logo-text{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:1.3rem;
    color:#fff;
    letter-spacing:0.02em;
    display:flex;align-items:baseline;gap:2px;
  }
  .logo-text span{color:var(--orange);}
  .logo-text small{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:0.55rem;
    letter-spacing:0.18em;
    color:#8a8a8a;
    text-transform:uppercase;
    margin-top:2px;
  }
  .nav-links{display:flex;gap:32px;align-items:center;}
  .nav-links a{
    color:#cfcfcf;font-size:0.88rem;font-weight:500;
    text-transform:uppercase;letter-spacing:0.04em;
    position:relative;padding-bottom:4px;
  }
  .nav-links a:hover{color:#fff;}
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
    background:var(--orange);transition:width .25s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-links a.btn{
    padding:13px 26px;
    line-height:1;
  }
  .nav-links a.btn::after{display:none;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 26px;
    background:var(--orange);
    color:#111;
    font-weight:700;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    border-radius:var(--radius);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow:0 0 0 rgba(255,106,19,0);
  }
  .btn:hover{background:#ff7a2b;transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(255,106,19,0.55);}
  .btn.ghost{
    background:transparent;color:#fff;border:1.5px solid #444;
  }
  .btn.ghost:hover{border-color:var(--orange);color:var(--orange);background:transparent;}
  .btn-disabled{
    background:#3a3a3a;color:#8a8a8a;cursor:not-allowed;
    pointer-events:none;
  }
  .btn-disabled:hover{background:#3a3a3a;transform:none;box-shadow:none;}
  .menu-toggle{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    background:none;padding:6px;width:36px;height:36px;position:relative;z-index:101;
  }
  .menu-toggle span{
    width:24px;height:2px;background:#fff;display:block;
    transition:transform .3s ease, opacity .2s ease, background .3s ease;
  }
  .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .menu-toggle.open span{background:var(--orange);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:
      radial-gradient(ellipse at 75% 20%, rgba(255,106,19,0.16), transparent 55%),
      linear-gradient(180deg, #141414 0%, #0c0c0c 100%);
    color:#fff;
    overflow:hidden;
    padding:96px 0 90px;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px);
    pointer-events:none;
  }
  .hero-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
  }
  .hero h1{
    font-size:clamp(2.6rem,5.4vw,4.4rem);
    color:#fff;
    margin-bottom:20px;
  }
  .hero h1 em{
    font-style:normal;color:var(--orange);
  }
  .hero p.lead{
    font-size:1.08rem;color:#c7c7c4;max-width:480px;margin-bottom:34px;
  }
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap;}
  .hero-stats{
    display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;
  }
  .hero-stats div{border-left:2px solid var(--orange);padding-left:14px;}
  .hero-stats .num{font-family:'Oswald',sans-serif;font-size:1.7rem;font-weight:700;color:#fff;}
  .hero-stats .lbl{font-size:0.78rem;color:#9a9a97;text-transform:uppercase;letter-spacing:0.03em;}

  .hero-art{
    position:relative;
    aspect-ratio:4/5;
    border:1px solid var(--line-on-ink);
    background:
      radial-gradient(circle at 30% 20%, rgba(255,106,19,0.25), transparent 45%),
      #1a1a1a;
    display:flex;align-items:center;justify-content:center;
    border-radius:4px;
    overflow:hidden;
  }
  .hero-art .slot-photo.loaded ~ .bolt-mark{display:none;}
  .bolt-mark{width:56%;height:auto;animation:spin 22s linear infinite;transform-origin:center;position:relative;z-index:1;}
  @keyframes spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion: reduce){.bolt-mark{animation:none;}}

  /* ---------- Section shells ---------- */
  section{padding:88px 0;}
  .section-dark{background:var(--ink);color:#fff;}
  .section-orange{background:var(--orange);color:#111;}
  .section-steel{background:var(--steel);}
  .kicker{
    color:var(--orange);
    margin-bottom:10px;
  }
  .section-dark .kicker, .section-orange .kicker{color:#111;}
  .section-dark .kicker{color:var(--orange);}
  h2.title{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:18px;}
  p.sub{color:var(--text-muted);max-width:560px;font-size:1.02rem;}
  .section-dark p.sub{color:#b7b7b4;}

  /* ==========================================================
     FOTOS — mismo sistema que los logos de marca.
     Cada placeholder [FOTO] tiene adentro un <img> apuntando a
     un archivo dentro de images/ (el nombre exacto está en un
     comentario arriba de cada uno, en el HTML). No hay que
     tocar ni el HTML ni este CSS para activarlas:

       - Archivo ausente  → se ve el patrón rayado, como ahora.
       - Archivo presente → la foto lo reemplaza sola, recortada
         para llenar el espacio (object-fit: cover).

     Simplemente andá guardando las fotos en la carpeta images/
     con el nombre que indica cada comentario.
     ========================================================== */
  .slot-photo{
    display:none;
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center;
  }
  .slot-photo.loaded{display:block;}

  /* ---------- Productos ---------- */
  .productos{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
  }
  .productos .col{padding:80px 60px;}
  .productos .col.text{background:var(--ink);color:#fff;}
  .productos .col.visual{
    background:
      repeating-linear-gradient(45deg, #232323 0 2px, #1b1b1b 2px 34px);
    display:flex;align-items:center;justify-content:center;padding:0;
    min-height:420px;position:relative;overflow:hidden;
  }
  .productos .col.visual svg{width:60%;opacity:0.9;transition:opacity .2s ease;position:relative;z-index:1;}
  .productos .col.visual .slot-photo.loaded ~ svg{opacity:0;}
  .feature-list{margin:30px 0 36px;display:flex;flex-direction:column;gap:16px;}
  .feature-list li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:#e5e5e2;}
  .feature-list .ico{
    flex:none;width:34px;height:34px;border:1.5px solid var(--orange);
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    color:var(--orange);
  }
  .catalogo-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .catalogo-cta .hint{font-size:0.85rem;color:#9a9a97;font-style:italic;}

  /* ---------- Marcas ---------- */
  .marcas{display:grid;grid-template-columns:0.85fr 1.15fr;}
  .marcas .visual{
    background:
      repeating-linear-gradient(-45deg, #e7e5df 0 2px, #f4f3f0 2px 30px);
    min-height:380px;position:relative;overflow:hidden;
  }
  .marcas .content{background:var(--orange);color:#111;padding:80px 60px;}
  .brand-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;
  }
  /* Cada chip arranca mostrando el nombre de la marca en texto. Si guardás el logo
     en images/brands/<nombre>.png (los nombres de archivo que espera cada uno están
     en los comentarios del HTML, al lado de cada chip), el logo se activa solo:
     no hace falta tocar ni el HTML ni este CSS. Si el archivo no existe, sigue
     mostrando el texto como ahora — nunca va a aparecer un ícono de imagen rota. */
  .brand-chip{
    position:relative;
    background:#111;color:#fff;
    border-radius:var(--radius);
    padding:20px 12px;
    text-align:center;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    letter-spacing:0.03em;
    font-size:0.95rem;
    display:flex;align-items:center;justify-content:center;
    min-height:64px;
    transition:transform .15s ease, background .2s ease;
  }
  .brand-chip:hover{transform:translateY(-3px);}
  .brand-logo{
    display:none;
    max-width:72%;max-height:56%;
    object-fit:contain;
  }
  .brand-logo.loaded{display:block;}
  .brand-logo.loaded + .brand-label{display:none;}
  /* Cuando el logo carga, el chip pasa a fondo blanco (la mayoría de los logos de
     marcas de herramientas están pensados para fondo claro). :has() no funciona en
     navegadores muy viejos; en esos casos el logo igual se ve, solo que sobre fondo
     negro en vez de blanco. */
  .brand-chip:has(.brand-logo.loaded){background:#fff;}

  /* ---------- Contact form ---------- */
  .contacto{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:start;}
  .form-card{
    background:#fff;border:1px solid #e6e4de;border-radius:6px;
    padding:36px;box-shadow:0 24px 60px -30px rgba(0,0,0,0.25);
  }
  .field{margin-bottom:20px;}
  .field label{
    display:block;font-size:0.82rem;font-weight:600;margin-bottom:8px;
    text-transform:uppercase;letter-spacing:0.03em;color:#3a3a38;
  }
  .field input, .field textarea{
    width:100%;padding:13px 14px;border:1.5px solid #dedcd5;border-radius:4px;
    font-family:inherit;font-size:0.96rem;background:#fdfdfc;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .field input:focus, .field textarea:focus{
    outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,106,19,0.15);
  }
  .field textarea{resize:vertical;min-height:90px;}
  .form-note{font-size:0.76rem;color:var(--text-muted);margin-top:12px;text-align:center;}
  .form-msg{
    margin-top:16px;padding:12px 14px;border-radius:4px;font-size:0.9rem;
    display:none;
  }
  .form-msg.ok{background:#e9f7ec;color:#1e6b34;border:1px solid #bfe6c8;}
  .form-msg.err{background:#fbe9e7;color:#9a2c1f;border:1px solid #f3c2ba;}
  .form-msg.show{display:block;}
  .submit-btn:disabled{opacity:0.6;cursor:not-allowed;}
  .submit-btn{width:100%;}

  /* ---------- Historia / relaciones ---------- */
  .relaciones{
    display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--orange);
  }
  .relaciones .text{padding:80px 60px;color:#111;}
  .relaciones h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:22px;}
  .relaciones p{margin-bottom:16px;max-width:480px;color:#1c1c1c;}
  .relaciones .visual{
    background:repeating-linear-gradient(115deg,#0d0d0d 0 2px, #1a1a1a 2px 30px);
    min-height:380px;position:relative;overflow:hidden;
  }

  /* ---------- Valores ---------- */
  .valores-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;
  }
  .valor-card{
    background:var(--ink-soft);border:1px solid var(--line-on-ink);
    padding:0 0 26px;overflow:hidden;
  }
  .valor-card .img{
    height:140px;
    background:repeating-linear-gradient(60deg,#242424 0 2px,#191919 2px 22px);
    margin-bottom:20px;position:relative;overflow:hidden;
  }
  .valor-card h3{font-size:1.05rem;color:#fff;padding:0 22px;margin-bottom:10px;}
  .valor-card p{font-size:0.88rem;color:#a8a8a5;padding:0 22px;}

  /* ---------- Mision Vision ---------- */
  .mv-wrap{position:relative;}
  .mv-visual{
    background:repeating-linear-gradient(-60deg,#e2e0d9 0 2px,var(--steel) 2px 30px);
    min-height:420px;position:relative;overflow:hidden;
  }
  .mv-cards{
    display:flex;flex-direction:column;gap:0;
    max-width:420px;margin-left:auto;margin-top:-140px;position:relative;z-index:2;
    padding-right:6vw;
  }
  .mv-card{background:#fff;border:1px solid #e6e4de;box-shadow:0 20px 50px -25px rgba(0,0,0,0.3);}
  .mv-card + .mv-card{margin-top:24px;}
  .mv-card h3{
    background:#111;color:#fff;padding:16px 24px;font-size:1.15rem;
  }
  .mv-card p{padding:22px 24px;color:#3a3a38;font-size:0.95rem;}

  /* ---------- Por que elegir ---------- */
  .porque{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff;}
  .porque .text{padding:80px 60px;}
  .porque .tag{
    display:inline-block;background:var(--orange);color:#111;
    padding:10px 18px;font-weight:700;font-size:0.88rem;text-transform:uppercase;
    margin-bottom:28px;
  }
  .check-grid{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
  .check-grid li{display:flex;gap:12px;align-items:center;font-size:1.02rem;color:#e5e5e2;}
  .check-grid .tick{color:var(--orange);font-weight:700;font-size:1.1rem;}
  .porque .visual{
    background:repeating-linear-gradient(45deg,#f4f3f0 0 2px,#e2e0d9 2px 28px);
    min-height:420px;position:relative;overflow:hidden;
  }

  /* ---------- Cotizacion 2 ---------- */
  .cotizacion2{background:var(--steel);}

  /* ---------- Footer ---------- */
  footer{background:#0c0c0c;color:#e5e5e2;padding:64px 0 28px;}
  .footer-grid{
    display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-bottom:44px;
    border-bottom:1px solid var(--line-on-ink);
  }
  footer h4{
    font-family:'JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:0.12em;
    text-transform:uppercase;color:#8a8a8a;margin-bottom:16px;
  }
  footer p, footer a{font-size:0.92rem;color:#c7c7c4;margin-bottom:8px;display:block;}
  footer a:hover{color:var(--orange);}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;padding-top:24px;
    font-size:0.8rem;color:#7a7a77;flex-wrap:wrap;gap:12px;
  }
  .footer-bottom .brandline{color:var(--orange);font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;}

  /* ---------- WhatsApp flotante ---------- */
  .whatsapp-float{
    position:fixed;
    right:20px;bottom:20px;
    right:calc(20px + env(safe-area-inset-right, 0px));
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    width:58px;height:58px;
    background:#25D366;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 28px -8px rgba(0,0,0,0.45);
    z-index:90;
    transition:transform .2s ease;
  }
  .whatsapp-float:hover{transform:scale(1.07);}
  .whatsapp-float svg{width:30px;height:30px;}
  .whatsapp-float::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:#25D366;opacity:0.55;
    animation:wa-pulse 2.4s ease-out infinite;
  }
  @keyframes wa-pulse{
    0%{transform:scale(1);opacity:0.55;}
    100%{transform:scale(1.7);opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){.whatsapp-float::before{animation:none;}}
  @media (max-width:720px){
    .whatsapp-float{width:52px;height:52px;right:16px;bottom:16px;right:calc(16px + env(safe-area-inset-right, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));}
    .whatsapp-float svg{width:27px;height:27px;}
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-art{max-width:360px;margin:0 auto;}
    .productos, .marcas, .relaciones, .porque{grid-template-columns:1fr;}
    .productos .col, .relaciones .text, .porque .text, .marcas .content{padding:56px 28px;}
    .valores-grid{grid-template-columns:repeat(2,1fr);}
    .contacto{grid-template-columns:1fr;}
    .mv-cards{margin:32px auto 0;max-width:100%;padding-right:0;}
    .footer-grid{grid-template-columns:1fr;gap:28px;}
  }
  @media (max-width: 720px){
    .nav-links{
      position:fixed;inset:64px 0 0 0;background:#111;flex-direction:column;
      padding:32px 28px;gap:22px;transform:translateX(100%);transition:transform .25s ease;
    }
    .nav-links.open{transform:translateX(0);}
    .menu-toggle{display:flex;}
    .brand-grid{grid-template-columns:repeat(2,1fr);}
  }