:root{
    --charcoal:#1C1815;
    --charcoal-soft:#26211D;
    --bone:#F2ECE0;
    --bone-dim:#E7DDC9;
    --oxblood:#1F4E79;
    --oxblood-light:#2E6FA3;
    --steel:#4B5A66;
    --steel-light:#6C7B87;
    --ochre:#8A94A0;
    --ink:#241F1B;
    --line: rgba(36,31,27,0.14);
    --line-dark: rgba(242,236,224,0.14);
    --font-display:'Oswald', sans-serif;
    --font-body:'Work Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bone);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--oxblood);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--oxblood); display:block;}
  section.dark .eyebrow{color:var(--ochre);}
  section.dark .eyebrow::before{background:var(--ochre);}
  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  section.dark h1, section.dark h2, section.dark h3{color:var(--bone);}
  h2{font-size:clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom:14px;}
  p{color:var(--ink); opacity:0.82;}
  section.dark p{color:var(--bone); opacity:0.78;}
  .btn{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:14px 26px;
    border-radius:2px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn-primary{background:var(--oxblood); color:var(--bone);}
  .btn-primary:hover{background:var(--oxblood-light); transform:translateY(-2px);}
  .btn-ghost{border-color:var(--line-dark); color:var(--bone);}
  .btn-ghost:hover{border-color:var(--bone); transform:translateY(-2px);}
  .btn-outline{border-color:var(--ink); color:var(--ink);}
  .btn-outline:hover{background:var(--ink); color:var(--bone); transform:translateY(-2px);}

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(28,24,21,0.0);
    backdrop-filter:none;
    transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  }
  header.scrolled{
    background:rgba(28,24,21,0.92);
    backdrop-filter:blur(8px);
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px;
    max-width:1180px; margin:0 auto;
  }
  .logo{display:flex; align-items:center; gap:12px;}
  .logo-mark{width:38px; height:38px; flex-shrink:0;}
  .logo-text{font-family:var(--font-display); color:var(--bone); line-height:1.05;}
  .logo-text strong{display:block; font-size:1.05rem; font-weight:700; letter-spacing:0.02em;}
  .logo-text span{display:block; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; color:var(--ochre); text-transform:uppercase;}
  .nav-links{display:flex; align-items:center; gap:34px;}
  .nav-links a{
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--bone); opacity:0.8;
    position:relative; padding-bottom:4px;
  }
  .nav-links a::after{content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--ochre); transition:width .2s ease;}
  .nav-links a:hover{opacity:1;}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{display:none;}
  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .burger span{width:24px; height:2px; background:var(--bone); display:block;}
  .mobile-menu{
    display:none; position:fixed; inset:0; background:var(--charcoal); z-index:99;
    flex-direction:column; align-items:center; justify-content:center; gap:28px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{font-family:var(--font-display); font-size:1.6rem; color:var(--bone);}
  .mobile-close{position:absolute; top:24px; right:32px; background:none; border:none; color:var(--bone); font-size:1.8rem; cursor:pointer;}

  /* ---------- HERO ---------- */
  .hero{
    background:var(--charcoal);
    padding:170px 0 110px;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center;
  }
  .hero h1{
    font-size:clamp(2.3rem, 4.4vw, 3.6rem);
    line-height:1.08;
    margin:18px 0 22px;
    color: #ffffff;
  }
  .hero h1 em{font-style:normal; color:var(--ochre);}
  .hero-sub{max-width:520px; font-size:1.05rem; margin-bottom:34px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:46px;}
  .chip-row{display:flex; flex-wrap:wrap; gap:10px;}
  .chip{
    font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em;
    color:var(--bone); border:1px solid var(--line-dark); border-radius:2px;
    padding:8px 12px; opacity:0.85;
  }
  .stamp-wrap{position:relative; display:flex; align-items:center; justify-content:center;}
  .stamp{width:min(320px, 90%); animation:stamp-in 0.9s cubic-bezier(.2,.8,.2,1) 0.2s both;}
  @keyframes stamp-in{
    0%{opacity:0; transform:scale(1.6) rotate(-8deg);}
    70%{opacity:1;}
    100%{opacity:1; transform:scale(1) rotate(-8deg);}
  }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:96px 0;}
  section.dark{background:var(--charcoal);}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{margin-top:12px;}

  /* ---------- PRODUCTOS ---------- */
  .product-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
  .product-card{
    background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:34px 28px; position:relative; overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .product-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(36,31,27,0.12);}
  .product-icon{width:56px; height:56px; margin-bottom:22px; color:var(--oxblood);}
  .product-card h3{font-size:1.3rem; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.02em;}
  .product-card p{font-size:0.95rem; margin-bottom:20px;}
  .tag-row{display:flex; flex-wrap:wrap; gap:8px;}
  .tag{
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.03em;
    background:var(--bone-dim); color:var(--ink); padding:6px 10px; border-radius:2px;
  }
  .product-num{
    position:absolute; top:20px; right:24px; font-family:var(--font-mono);
    font-size:0.7rem; color:var(--line); opacity:0.6;
  }

  /* ---------- LOGISTICA ---------- */
  .logistics{background:var(--steel); position:relative;}
  .logistics h2, .logistics h3{color:var(--bone);}
  .logistics p{color:var(--bone); opacity:0.85;}
  .logistics .eyebrow{color:var(--ochre);}
  .logistics .eyebrow::before{background:var(--ochre);}
  .route{
    display:flex; align-items:center; justify-content:space-between;
    margin:50px 0 60px; position:relative; padding:0 10px;
  }
  .route::before{
    content:""; position:absolute; left:5%; right:5%; top:50%; height:0;
    border-top:2px dashed rgba(242,236,224,0.35); transform:translateY(-50%); z-index:0;
  }
  .route-node{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px;
    text-align:center; flex:1;
  }
  .route-dot{
    width:14px; height:14px; border-radius:50%; background:var(--ochre);
    border:3px solid var(--steel); box-shadow:0 0 0 2px rgba(198,138,52,0.4);
  }
  .route-label{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--bone); text-transform:uppercase; max-width:130px;}
  .truck{position:absolute; top:calc(50% - 13px); left:0; z-index:2; width:26px; height:26px; color:var(--bone); animation:drive 9s linear infinite;}
  @keyframes drive{
    0%{left:4%;} 48%{left:calc(50% - 13px);} 52%{left:calc(50% - 13px);} 100%{left:92%;}
  }
  .service-pair{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .service-box{
    background:rgba(28,24,21,0.28); border:1px solid rgba(242,236,224,0.18);
    border-radius:4px; padding:28px;
  }
  .service-box h3{font-size:1.05rem; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:10px;}
  .service-box p{font-size:0.92rem;}

  /* ---------- SERVICIOS CORPORATIVOS ---------- */
  .corp-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;}
  .corp-card{
    border-top:2px solid var(--oxblood); padding-top:20px;
  }
  .corp-card .num{font-family:var(--font-mono); font-size:0.72rem; color:var(--oxblood); letter-spacing:0.04em;}
  .corp-card h3{font-size:1.05rem; margin:10px 0 8px; text-transform:uppercase; letter-spacing:0.01em;}
  .corp-card p{font-size:0.9rem;}

  /* ---------- PILARES ---------- */
  .pillars{background:var(--charcoal);}
  .pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
  .pillar{text-align:left;}
  .pillar-icon{width:44px; height:44px; color:var(--ochre); margin-bottom:18px;}
  .pillar h3{color:var(--bone); font-size:1.15rem; margin-bottom:10px; text-transform:uppercase;}
  .pillar p{color:var(--bone); opacity:0.75; font-size:0.94rem;}

  /* ---------- CONTACTO ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
  .contact-info dl{margin-top:24px;}
  .contact-info dt{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--oxblood); margin-top:22px;}
  .contact-info dd{font-size:1rem; margin-top:4px;}
  form{display:flex; flex-direction:column; gap:16px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  label{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px; display:block; opacity:0.7;}
  input, select, textarea{
    width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:2px;
    background:#fff; font-family:var(--font-body); font-size:0.95rem; color:var(--ink);
  }
  input:focus, select:focus, textarea:focus{outline:2px solid var(--oxblood); outline-offset:1px;}
  textarea{resize:vertical; min-height:100px;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--charcoal); padding:56px 0 28px; border-top:1px solid var(--line-dark);}
  .footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:40px;}
  .footer-nav{display:flex; gap:28px; flex-wrap:wrap;}
  .footer-nav a{font-family:var(--font-mono); font-size:0.75rem; color:var(--bone); opacity:0.75; letter-spacing:0.03em; text-transform:uppercase;}
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding-top:22px; border-top:1px solid var(--line-dark);
    font-family:var(--font-mono); font-size:0.7rem; color:var(--bone); opacity:0.55;
  }

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.visible{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .reveal{transition:none; opacity:1; transform:none;}
    .stamp{animation:none;}
    .truck{animation:none;}
  }

  @media (max-width: 900px){
    .hero .wrap{grid-template-columns:1fr; text-align:left;}
    .stamp-wrap{order:-1; margin-bottom:20px;}
    .stamp{width:200px;}
    .product-grid{grid-template-columns:1fr; }
    .service-pair{grid-template-columns:1fr;}
    .corp-grid{grid-template-columns:repeat(2,1fr);}
    .pillar-grid{grid-template-columns:1fr; gap:30px;}
    .contact-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .nav-links{display:none;}
    .burger{display:flex;}
    .route{flex-direction:column; gap:30px; align-items:flex-start;}
    .route::before{display:none;}
    .truck{display:none;}
  }