:root{
    --red:#c6192d;
    --red-dark:#921320;
    --graphite:#2e3338;
    --graphite-line:#454b51;
    --blue:#1c6ea4;
    --blue-light:#5fa8d3;
    --black:#1a1a1a;
    --text:#1a1a1a;
    --muted:#5b6470;
    --white:#ffffff;
    --gray-50:#f4f5f6;
    --gray-100:#eceef0;
    --line:#dde1e4;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'IBM Plex Sans', sans-serif;
    background:var(--white);
    color:var(--text);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-weight:600;
    line-height:1.08;
  }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--red);
    font-weight:600;
    margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:""; width:22px; height:2px; background:var(--red); display:inline-block; }
  section.on-dark .eyebrow{ color:var(--blue-light); }
  section.on-dark .eyebrow::before{ background:var(--blue-light); }

  /* ===== Header ===== */
  header{
    position:sticky; top:0; z-index:100;
    background:var(--white);
    border-bottom:3px solid var(--red);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    max-width:1140px; margin:0 auto;
  }
  .brandmark{ display:flex; align-items:center; }
  .brandmark img{ height:46px; width:auto; }
  nav.links{
    display:flex; gap:32px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px; letter-spacing:0.03em;
  }
  nav.links a{ color:var(--black); transition:color .15s; text-transform:uppercase; }
  nav.links a:hover, nav.links a:focus-visible{ color:var(--red); }
  .nav-cta{
    background:var(--red); color:var(--white);
    font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:13px;
    padding:10px 18px; letter-spacing:0.03em; text-transform:uppercase; white-space:nowrap;
  }
  .nav-cta:hover{ background:var(--red-dark); }

  /* ===== Hero ===== */
  .hero{
    background:var(--graphite);
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:96px 0 80px;
  }
  .hero .diamond{
    position:absolute;
    top:-140px; right:-140px;
    width:480px; height:480px;
    background:var(--red);
    transform:rotate(45deg);
    opacity:0.9;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(20,20,20,1) 0%, rgba(20,20,20,0.55) 55%, rgba(20,20,20,0.15) 100%);
    z-index:1;
  }
  .hero .wrap{ position:relative; z-index:2; }
  .hero .tag{
    display:inline-block;
    font-family:'IBM Plex Mono', monospace; font-size:12.5px;
    color:var(--blue-light); letter-spacing:0.18em; text-transform:uppercase;
    border:1px solid var(--blue-light); padding:6px 12px; margin-bottom:26px;
  }
  .hero h1{ font-size:clamp(34px, 5.2vw, 58px); max-width:760px; color:#fff; }
  .hero h1 em{ font-style:normal; color:var(--red); }
  .hero p.lead{ margin-top:22px; max-width:540px; color:#d6d6d6; font-size:17px; }
  .hero .cta-row{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 24px;
    font-family:'IBM Plex Mono', monospace; font-size:13.5px; font-weight:600;
    letter-spacing:0.03em; text-transform:uppercase;
    transition:all .15s; border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{ background:var(--red); color:#fff; }
  .btn-primary:hover{ background:var(--red-dark); }
  .btn-ghost{ border-color:#555; color:#fff; }
  .btn-ghost:hover{ border-color:#fff; }

  .hero-strip{
    margin-top:64px; display:grid; grid-template-columns:repeat(4, 1fr);
    border-top:1px solid var(--graphite-line); padding-top:26px; gap:20px;
  }
  .hero-strip .item .num{ font-family:'Oswald', sans-serif; font-size:26px; color:var(--blue-light); font-weight:600; }
  .hero-strip .item .lbl{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#9a9a9a; letter-spacing:0.06em; text-transform:uppercase; margin-top:4px; }

  /* ===== Quienes somos ===== */
  .about{ padding:96px 0; }
  .about .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:start; }
  .about h2{ font-size:clamp(28px,3.4vw,38px); margin-bottom:22px; max-width:480px;}
  .about p{ color:var(--muted); font-size:16px; max-width:520px; }
  .about p + p{ margin-top:16px; }

  .plate{
    background:var(--graphite); color:#fff; padding:34px 32px; position:relative; border:1px solid var(--graphite-line);
  }
  .plate::before, .plate::after,
  .plate .rv2::before, .plate .rv2::after{
    content:""; position:absolute; width:7px; height:7px; border-radius:50%;
    background:var(--red);
  }
  .plate::before{ top:10px; left:10px; }
  .plate::after{ top:10px; right:10px; }
  .plate .rv2{ position:static; }
  .plate .rv2::before{ bottom:10px; left:10px; top:auto; }
  .plate .rv2::after{ bottom:10px; right:10px; top:auto; }
  .plate .eyebrow{ color:var(--blue-light); }
  .plate ul{ list-style:none; margin-top:6px; }
  .plate li{
    display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--graphite-line);
    font-family:'IBM Plex Mono', monospace; font-size:13.5px;
  }
  .plate li:last-child{ border-bottom:none; }
  .plate li span:first-child{ color:#c9c9c9; }
  .plate li span:last-child{ color:var(--blue-light); font-weight:600; }

  /* ===== Marcas ===== */
  .brands{ background:var(--gray-50); padding:88px 0; }
  .brands h2{ font-size:clamp(28px,3.4vw,38px); max-width:600px; }
  .brands .sub{ color:var(--muted); margin-top:14px; max-width:560px; font-size:16px;}
  .brands-media{
    margin-top:48px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:24px;
    align-items:stretch;
  }
  .brands-media .photo{
    border:1px solid var(--line);
    overflow:hidden;
  }
  .brands-media .photo img{ width:100%; height:100%; object-fit:cover; }
  .brands-list{
    background:var(--white);
    border:1px solid var(--line);
    padding:8px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .brands-list img{ width:100%; }
  .brand-note{
    margin-top:16px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--muted);
    letter-spacing:0.02em;
    text-align:center;
  }
  .brand-tags{
    margin-top:40px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .btag{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.02em;
    color:var(--text);
    background:var(--white);
    border:1px solid var(--line);
    padding:8px 14px;
    white-space:nowrap;
  }
  .btag-own{
    background:var(--red);
    border-color:var(--red);
    color:#fff;
    font-weight:600;
  }
  .btag-more{
    background:transparent;
    border-style:dashed;
    color:var(--muted);
  }
  .brand-closing{
    margin-top:32px;
    padding-top:28px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:15px;
    max-width:880px;
  }

  /* ===== Categorias ===== */
  .cats{ padding:88px 0; }
  .cats h2{ font-size:clamp(28px,3.4vw,38px); max-width:600px; }
  .cats .sub{ color:var(--muted); margin-top:14px; max-width:600px; font-size:16px; }
  .cat-grid{
    margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
    background:var(--line); border:1px solid var(--line);
  }
  .cat-card{ background:var(--white); padding:26px 24px; }
  .cat-card .code{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue); letter-spacing:0.08em; font-weight:600; }
  .cat-card .name{ font-family:'Oswald', sans-serif; font-size:17px; font-weight:500; margin-top:8px; letter-spacing:0.01em; }

  /* ===== Por que elegir ===== */
  .why{ background:var(--graphite); color:#fff; padding:88px 0; }
  .why h2{ font-size:clamp(28px,3.4vw,38px); max-width:600px; color:#fff; }
  .why-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--graphite-line); border:1px solid var(--graphite-line); }
  .why-item{ background:var(--graphite); padding:28px 26px; }
  .why-item .check{
    width:26px; height:26px; border:1.5px solid var(--red);
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono', monospace; color:var(--blue-light); font-size:14px; margin-bottom:16px;
  }
  .why-item p{ color:#c9c9c9; font-size:14.5px; }

  /* ===== Contacto ===== */
  .contact{ padding:96px 0; }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); }
  .contact-info{ background:var(--graphite); color:#fff; padding:48px 44px; }
  .contact-info h2{ color:#fff; font-size:clamp(26px,3vw,34px); }
  .contact-info .lead{ color:#c9c9c9; margin-top:14px; font-size:15.5px; max-width:420px;}
  .contact-list{ margin-top:36px; list-style:none; }
  .contact-list li{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--graphite-line); }
  .contact-list li:first-child{ border-top:none; }
  .contact-list .ico{
    font-family:'IBM Plex Mono', monospace; color:var(--blue-light); font-size:12px; width:70px; flex-shrink:0;
    text-transform:uppercase; letter-spacing:0.06em; padding-top:2px;
  }
  .contact-list .val{ font-family:'IBM Plex Mono', monospace; font-size:15px; color:#fff; }
  .contact-list a.val:hover{ color:var(--blue-light); }
  .contact-list .val .small{ display:block; color:#9a9a9a; font-size:12.5px; margin-top:3px; }
  .contact-cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }

  .map-wrap{ position:relative; min-height:340px; background:var(--line);}
  .map-wrap iframe{ width:100%; height:100%; position:absolute; inset:0; border:0; }

  footer{ background:var(--white); border-top:3px solid var(--red); padding:28px 0; }
  footer .wrap{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  }
  footer .fcontact{
    font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted); text-align:right;
  }

  /* ===== Formulario de cotización ===== */
  .quote-form{
    margin-top:28px;
    background:var(--gray-50);
    border:1px solid var(--line);
    padding:44px;
  }
  .quote-form h2{ font-size:clamp(24px,2.8vw,32px); }
  .qf-lead{ color:var(--muted); margin-top:12px; max-width:560px; font-size:15.5px; }
  .quote-form form{ margin-top:32px; }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .form-field{ margin-bottom:20px; display:flex; flex-direction:column; }
  .form-field-full{ width:100%; }
  .form-field label{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .form-field input,
  .form-field textarea{
    font-family:'IBM Plex Sans', sans-serif;
    font-size:15px;
    padding:12px 14px;
    border:1px solid var(--line);
    background:var(--white);
    color:var(--text);
    width:100%;
  }
  .form-field input:focus,
  .form-field textarea:focus{
    outline:none;
    border-color:var(--blue);
  }
  .form-field textarea{ resize:vertical; min-height:120px; font-family:'IBM Plex Sans', sans-serif; }
  .hp-field{ position:absolute; left:-9999px; top:-9999px; }
  .form-submit-row{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .form-status{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--muted);
  }
  .form-status.is-success{ color:var(--blue); font-weight:600; }
  .form-status.is-error{ color:var(--red); font-weight:600; }

  /* ===== Botón flotante de WhatsApp ===== */
  .wa-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.28);
    z-index:200;
    transition:transform .15s;
  }
  .wa-float:hover{ transform:scale(1.07); }

  @media (max-width: 860px){
    nav.links{ display:none; }
    .about .grid{ grid-template-columns:1fr; gap:40px; }
    .hero-strip{ grid-template-columns:repeat(2,1fr); }
    .brands-media{ grid-template-columns:1fr; }
    .cat-grid{ grid-template-columns:1fr; }
    .why-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .map-wrap{ min-height:280px; }
    footer .wrap{ flex-direction:column; align-items:flex-start; }
    footer .fcontact{ text-align:left; }
    .quote-form{ padding:28px 22px; }
    .form-row{ grid-template-columns:1fr; }
    .wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
  }