:root{
    --navy: #1B3A5C;
    --navy-2: #234B70;
    --gray-900: #1F2530;
    --gray-600: #5B6472;
    --gray-300: #C9CED6;
    --gray-100: #F3F4F5;
    --steel: #3F87A6;
    --steel-text: #2A6683;
    --steel-text-dark: #6FB0CC;
    --amber: #E8A33D;
    --white: #FFFFFF;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    font-family: 'Inter', sans-serif;
    color: var(--gray-900);
    background: var(--white);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color: inherit; text-decoration: none; }
  ul{ list-style:none; }

  h1,h2,h3,.display{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel-text);
    display:flex;
    align-items:center;
    gap: 0.6em;
    margin-bottom: 0.9em;
  }
  .eyebrow::before{
    content:"";
    width: 22px; height: 2px;
    background: var(--amber);
    display:inline-block;
  }

  .wrap{ max-width: 1140px; margin: 0 auto; padding: 0 24px; }
  section{ padding: 88px 0; }
  @media (max-width:720px){ section{ padding: 56px 0; } }

  /* ---------- Header ---------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(27,58,92,0.96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 24px;
    max-width: 1140px; margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand svg{ width:34px; height:34px; }
  .brand-text{ color: var(--white); font-family:'Barlow Condensed'; font-weight:700; letter-spacing: 0.03em; font-size:1.15rem; text-transform:uppercase; }
  .brand-text span{ display:block; font-family:'JetBrains Mono'; font-size:0.6rem; letter-spacing:0.18em; color: var(--gray-300); text-transform:uppercase; margin-top:2px; }
  nav.links{ display:flex; align-items:center; gap: 30px; }
  nav.links a{
    color: var(--gray-300); font-size:0.92rem; font-weight:500;
    transition: color 0.15s ease;
  }
  nav.links a:hover{ color: var(--white); }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 11px 22px;
    background: var(--amber);
    color: var(--navy);
    font-weight:600; font-size:0.9rem;
    border-radius: 2px;
    border: none; cursor:pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,163,61,0.35); }
  .btn.ghost{
    background: transparent; color: var(--white);
    border: 1px solid rgba(255,255,255,0.35);
  }
  .btn.ghost:hover{ border-color: var(--amber); box-shadow:none; }
  .navbtn{ display:none; }
  .menu-toggle{
    display:none;
    background:none; border:none; cursor:pointer;
    padding: 8px; margin-left: 6px;
  }
  .menu-toggle svg{ width:26px; height:26px; display:block; }
  @media (max-width: 860px){
    .nav{ flex-wrap: wrap; position: relative; }
    .menu-toggle{ display:block; order: 2; }
    .nav .btn{ order: 3; font-size: 0.82rem; padding: 9px 16px; }
    nav.links{
      display:none;
      order: 4;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      background: var(--navy-2);
      border-top: 1px solid rgba(255,255,255,0.1);
      margin-top: 14px;
    }
    nav.links.open{ display:flex; }
    nav.links a{
      width:100%;
      padding: 14px 4px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
  }

  /* ---------- Hero ---------- */
  .hero{
    position: relative;
    background: radial-gradient(ellipse at 20% 0%, var(--navy-2), var(--navy) 60%);
    color: var(--white);
    padding: 120px 0 100px;
    overflow: hidden;
  }
  .hero::before{
    /* foam-cell texture */
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 12% 20%, rgba(63,135,166,0.20) 0 14px, transparent 15px),
      radial-gradient(circle at 32% 65%, rgba(63,135,166,0.16) 0 20px, transparent 21px),
      radial-gradient(circle at 55% 15%, rgba(232,163,61,0.10) 0 10px, transparent 11px),
      radial-gradient(circle at 78% 55%, rgba(63,135,166,0.16) 0 26px, transparent 27px),
      radial-gradient(circle at 92% 20%, rgba(63,135,166,0.14) 0 12px, transparent 13px),
      radial-gradient(circle at 68% 85%, rgba(232,163,61,0.08) 0 16px, transparent 17px),
      radial-gradient(circle at 8% 80%, rgba(63,135,166,0.12) 0 18px, transparent 19px);
    opacity: 0.9;
    pointer-events:none;
  }
  .hero-inner{ position: relative; max-width: 720px; }
  .hero h1{ font-size: clamp(2.4rem, 5.5vw, 4.1rem); color: var(--white); }
  .hero h1 em{ font-style:normal; color: var(--amber); }
  .hero p.lead{
    font-size: 1.08rem; color: var(--gray-300); margin-top: 22px; max-width: 560px;
  }
  .hero-cta{ display:flex; gap:14px; margin-top: 36px; flex-wrap:wrap; }

  .hero-stats{
    position: relative;
    margin-top: 64px;
    display:grid; grid-template-columns: repeat(2,1fr);
    gap: 1px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
    max-width: 640px;
  }
  .hero-stats div{ background: var(--navy); padding: 20px 22px; }
  .hero-stats .num{ font-family:'Barlow Condensed'; font-size:1.9rem; font-weight:700; color: var(--white); }
  .hero-stats .lbl{ font-family:'JetBrains Mono'; font-size:0.66rem; letter-spacing:0.08em; color: var(--gray-300); text-transform:uppercase; margin-top:4px; }
  @media (max-width:640px){ .hero-stats{ grid-template-columns: 1fr; max-width:100%; } }

  /* ---------- About ---------- */
  .about{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items:start; }
  .about h2{ font-size: 2.3rem; color: var(--navy); margin-bottom: 20px; }
  .about p{ color: var(--gray-600); margin-bottom: 16px; font-size: 1.02rem; }
  .about-panel{
    background: var(--gray-100);
    border-left: 3px solid var(--amber);
    padding: 30px 28px;
  }
  .about-panel ul li{
    display:flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--gray-300);
    font-size: 0.95rem; color: var(--gray-900);
  }
  .about-panel ul li:last-child{ border-bottom:none; }
  .about-panel ul li strong{ font-family:'JetBrains Mono'; color: var(--steel-text); font-weight:500; min-width: 26px; }
  @media (max-width: 860px){ .about{ grid-template-columns: 1fr; } }

  /* ---------- Density gauge (signature element) ---------- */
  .gauge-section{ background: var(--navy); color: var(--white); }
  .gauge-section .eyebrow{ color: var(--amber); }
  .hero .eyebrow{ color: var(--steel-text-dark); }
  .contact .eyebrow{ color: var(--steel-text-dark); }
  .gauge-section .eyebrow::before{ background: var(--steel); }
  .gauge-section h2{ color: var(--white); font-size: 2.1rem; max-width: 620px; }
  .gauge-section p.lead{ color: var(--gray-300); max-width: 560px; margin-top:14px; font-size:1rem; }

  .gauge{
    margin-top: 56px;
    position: relative;
  }
  .gauge-track{
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(90deg, #1a3350 0%, #245a76 30%, #3F87A6 55%, #E8A33D 100%);
    position: relative;
  }
  .gauge-marks{
    display:flex; justify-content: space-between;
    margin-top: 14px;
  }
  .gauge-marks div{ text-align:center; flex:1; position:relative; }
  .gauge-marks div::before{
    content:""; display:block; width:1px; height:10px; background: rgba(255,255,255,0.3);
    margin: 0 auto 8px;
  }
  .gauge-marks .d{ font-family:'Barlow Condensed'; font-size:1.3rem; font-weight:700; color: var(--white); }
  .gauge-marks .u{ font-family:'JetBrains Mono'; font-size:0.62rem; color: var(--gray-300); letter-spacing:0.06em; margin-top:2px; }
  .gauge-marks .n{ font-family:'Inter'; font-size:0.72rem; color: var(--gray-300); margin-top:4px; }
  @media (max-width:720px){
    .gauge-marks .n{ display:none; }
  }

  /* ---------- CNC ---------- */
  .cnc{ background: var(--white); }
  .cnc-grid{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items:center; }
  .cnc-text h2{ font-size: 2.2rem; color: var(--navy); max-width: 480px; }
  .cnc-text p{ color: var(--gray-600); margin-top: 16px; font-size: 1.02rem; max-width: 460px; }
  .cnc-list{ margin-top: 26px; }
  .cnc-list li{
    display:flex; gap: 12px; padding: 10px 0;
    font-size: 0.95rem; color: var(--gray-900);
    border-top: 1px solid var(--gray-300);
  }
  .cnc-list li:first-child{ border-top:none; }
  .cnc-list li::before{
    content:"→"; color: var(--amber); font-weight:700; flex-shrink:0;
  }
  .cnc-photo{
    position:relative;
    border: 6px solid var(--navy);
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }
  .cnc-photo img{ width:100%; height: 100%; object-fit: cover; object-position: center; display:block; }
  .cnc-photo .tag{
    position:absolute; bottom:0; left:0;
    background: var(--amber); color: var(--navy);
    font-family:'JetBrains Mono'; font-size:0.68rem; letter-spacing:0.06em;
    padding: 8px 14px; text-transform:uppercase; font-weight:500;
  }
  @media (max-width: 900px){
    .cnc-grid{ grid-template-columns: 1fr; }
    .cnc-photo{ max-width: 420px; margin: 0 auto; }
  }

  /* ---------- Photo gallery ---------- */
  .gallery{ background: var(--gray-100); }
  .gallery h2{ font-size: 2.1rem; color: var(--navy); max-width: 560px; }
  .gallery p.lead{ color: var(--gray-600); margin-top: 12px; max-width: 560px; }
  .photo-grid{
    margin-top: 44px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .photo-grid figure{
    margin:0; position:relative; overflow:hidden;
    background: var(--navy);
    aspect-ratio: 3 / 4;
  }
  .photo-grid img{ width:100%; height:100%; object-fit:cover; object-position: center; display:block; transition: transform 0.35s ease; }
  .photo-grid figure.wide{ grid-column: span 2; aspect-ratio: 16 / 9; }
  .photo-grid figure:hover img{ transform: scale(1.05); }
  .photo-grid figcaption{
    position:absolute; left:0; right:0; bottom:0;
    background: linear-gradient(0deg, rgba(27,58,92,0.88), transparent);
    color: var(--white); font-size:0.78rem; padding: 26px 12px 10px;
    font-family:'JetBrains Mono'; letter-spacing:0.02em;
  }
  @media (max-width: 760px){
    .photo-grid{ grid-template-columns: repeat(2,1fr); }
  }

  /* ---------- Products ---------- */
  .products h2{ font-size: 2.3rem; color: var(--navy); max-width: 560px; }
  .grid4{
    margin-top: 48px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--gray-300);
    border: 1px solid var(--gray-300);
  }
  .card{
    background: var(--white); padding: 34px 26px;
    display:flex; flex-direction:column; gap:14px;
    transition: background 0.15s ease;
  }
  .card:hover{ background: var(--gray-100); }
  .card .idx{ font-family:'JetBrains Mono'; font-size:0.7rem; color: var(--steel-text); letter-spacing:0.1em; }
  .card h3{ font-size: 1.35rem; color: var(--navy); text-transform:none; }
  .card p{ color: var(--gray-600); font-size: 0.92rem; }
  .card .icon{ width: 38px; height:38px; color: var(--amber); }
  @media (max-width: 960px){ .grid4{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .grid4{ grid-template-columns: 1fr; } }

  /* ---------- Process ---------- */
  .process{ background: var(--gray-100); }
  .process h2{ font-size: 2.1rem; color: var(--navy); }
  .steps{ margin-top: 46px; display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
  .step .num{
    font-family:'Barlow Condensed'; font-size: 3.2rem; font-weight:700;
    color: transparent; -webkit-text-stroke: 1.5px var(--steel);
    line-height:1;
  }
  .step h3{ font-size:1.2rem; color: var(--navy); text-transform:none; margin-top:10px; }
  .step p{ color: var(--gray-600); font-size:0.92rem; margin-top:8px; }
  @media (max-width: 860px){ .steps{ grid-template-columns: 1fr; gap: 30px; } }

  /* ---------- Sister brand ---------- */
  .sister{
    display:flex; align-items:center; justify-content:space-between; gap:40px;
    background: var(--white); border: 1px solid var(--gray-300);
    padding: 40px 44px;
  }
  .sister .eyebrow{ margin-bottom: 10px; }
  .sister h3{ font-size: 1.7rem; color: var(--navy); text-transform:none; }
  .sister p{ color: var(--gray-600); margin-top: 10px; max-width: 480px; font-size:0.95rem; }
  @media (max-width: 760px){ .sister{ flex-direction:column; align-items:flex-start; } }
  .faq{ background: var(--white); }
  .faq h2{ font-size: 2.1rem; color: var(--navy); max-width: 560px; }
  .faq-list{ margin-top: 40px; max-width: 760px; }
  .faq-item{ border-bottom: 1px solid var(--gray-300); padding: 22px 0; }
  .faq-item h3{ font-size: 1.05rem; color: var(--navy); text-transform:none; font-family:'Inter'; font-weight:600; }
  .faq-item p{ color: var(--gray-600); margin-top: 8px; font-size: 0.95rem; }

  /* ---------- Novedades ---------- */
  .news{ background: var(--gray-100); }
  .news h2{ font-size: 2.1rem; color: var(--navy); max-width: 560px; }
  .news-grid{ margin-top: 40px; display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
  .news-card{ background: var(--white); border: 1px solid var(--gray-300); padding: 26px 24px; }
  .news-date{ font-family:'JetBrains Mono'; font-size:0.68rem; letter-spacing:0.08em; color: var(--steel-text); text-transform:uppercase; }
  .news-card h3{ font-size: 1.1rem; color: var(--navy); text-transform:none; font-family:'Inter'; font-weight:600; margin-top:8px; }
  .news-card p{ color: var(--gray-600); font-size: 0.9rem; margin-top:8px; }
  @media (max-width: 860px){ .news-grid{ grid-template-columns: 1fr; } }

  /* ---------- Contact ---------- */
  .contact{ background: var(--navy); color: var(--white); }
  .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  .contact h2{ color: var(--white); font-size: 2.2rem; }
  .contact p.lead{ color: var(--gray-300); margin-top: 14px; max-width: 440px; }
  .contact-cta{ margin-top: 32px; display:flex; gap:14px; flex-wrap:wrap; }
  .info-list{ margin-top: 6px; }
  .info-list li{
    padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .info-list .lbl{ font-family:'JetBrains Mono'; font-size:0.65rem; letter-spacing:0.1em; color: var(--steel-text-dark); text-transform:uppercase; }
  .info-list .val{ font-size: 1.05rem; margin-top: 6px; color: var(--white); }
  @media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; gap:40px; } }

  /* ---------- WhatsApp flotante ---------- */
  .wa-float{
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 100;
    width: 58px; height: 58px;
    background: #25D366;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    transition: transform 0.15s ease;
  }
  .wa-float:hover{ transform: scale(1.08); }
  .wa-float svg{ width: 30px; height: 30px; }
  @media (max-width: 560px){
    .wa-float{ width: 52px; height: 52px; bottom: 16px; right: 16px; }
    .wa-float svg{ width: 26px; height: 26px; }
  }

  /* ---------- Barra superior (mail) ---------- */
  .topbar{
    background: #14304C;
    color: var(--gray-300);
    font-family:'JetBrains Mono';
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-align:center;
    padding: 7px 14px;
  }
  .topbar a{ color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
  @media (max-width:560px){ .topbar{ font-size: 0.66rem; } }

  /* ---------- Footer ---------- */
  footer{
    background: #14304C; color: var(--gray-300);
    padding: 34px 0;
    font-size: 0.85rem;
  }
  .foot-row{ display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
  .foot-brand{ display:flex; align-items:center; gap:10px; }
  .foot-brand svg{ width:22px; height:22px; opacity:0.8; }

  /* ---------- Blog / Novedades page ---------- */
  .blog-hero{
    background: linear-gradient(180deg, var(--navy-2), var(--navy));
    color: var(--white);
    padding: 70px 0 50px;
    text-align:center;
  }
  .blog-hero h1{ color: var(--white); font-size: clamp(2rem, 5vw, 3rem); }
  .blog-hero p{ color: var(--gray-300); max-width: 560px; margin: 14px auto 0; }

  .blog-grid{
    margin-top: 10px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  .post-card{
    background: var(--white); border: 1px solid var(--gray-300);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .post-media{ aspect-ratio: 4/3; background: var(--navy); position:relative; overflow:hidden; }
  .post-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .post-tag{
    position:absolute; top:12px; left:12px;
    background: var(--amber); color: var(--navy);
    font-family:'JetBrains Mono'; font-size:0.64rem; letter-spacing:0.06em;
    text-transform:uppercase; padding: 5px 10px; font-weight:600;
  }
  .post-play{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background: rgba(27,58,92,0.25);
  }
  .post-play svg{ width:52px; height:52px; }
  .post-body{ padding: 22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .post-date{ font-family:'JetBrains Mono'; font-size:0.68rem; color: var(--steel-text); letter-spacing:0.06em; text-transform:uppercase; }
  .post-body h3{ font-size: 1.2rem; color: var(--navy); text-transform:none; }
  .post-body p{ color: var(--gray-600); font-size:0.9rem; flex:1; }
  .post-link{ font-family:'JetBrains Mono'; font-size:0.78rem; color: var(--steel-text); font-weight:500; margin-top:4px; }
  .post-link:hover{ text-decoration: underline; }
  @media (max-width: 900px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 600px){ .blog-grid{ grid-template-columns: 1fr; } }

  .post-media.tiktok{
    aspect-ratio: unset;
    background: var(--gray-100);
    display:flex; align-items:flex-start; justify-content:center;
    padding: 0; overflow: visible;
  }
  .post-media.tiktok blockquote.tiktok-embed{ margin: 0 !important; }