:root {
      --blue:       #0086CB;
      --blue-brand: #1b477f;
      --blue-deep:  #0d2d52;
      --orange:     #F1A21E;
      --gray-light: #F4F6F8;
      --gray-mid:   #7A8FA0;
      --gray-dark:  #243040;
      --white:      #FFFFFF;
      --black:      #0A1520;
      --eX: cubic-bezier(0.16, 1, 0.3, 1);
      --eIO: cubic-bezier(0.4, 0, 0.2, 1);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Montserrat', sans-serif;
      color: var(--gray-dark); background: var(--white);
      overflow-x: hidden; -webkit-font-smoothing: antialiased;
    }
    body.modal-open { overflow: hidden; }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 10px 32px; }

    /* ── KEYFRAMES ─────────────────────────── */
    @keyframes fadeIn  { to { opacity: 1; } }
    @keyframes fadeUp  { to { opacity: 1; transform: translateY(0); } }
    @keyframes fill    { from { width: 0 } to { width: 100% } }
    @keyframes pulse   { 0%,100%{opacity:.45} 50%{opacity:1} }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ── CURSOR ────────────────────────────── */
    .cursor-dot {
      width: 8px; height: 8px; background: var(--orange); border-radius: 50%;
      position: fixed; pointer-events: none; z-index: 9999;
      transform: translate(-50%,-50%);
    }
    .cursor-ring {
      width: 36px; height: 36px; border: 2px solid var(--blue); border-radius: 50%;
      position: fixed; pointer-events: none; z-index: 9998;
      transform: translate(-50%,-50%);
      transition: width .3s var(--eX), height .3s var(--eX), border-color .25s, opacity .25s;
    }
    .cursor-ring.hov { width: 54px; height: 54px; border-color: var(--orange); opacity: .6; }
    @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

    /* ── PROGRESS ──────────────────────────── */
    .progress-bar {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--blue), var(--orange));
      z-index: 9999; pointer-events: none;
    }

    /* ── LOADER ────────────────────────────── */
    #loader {
      position: fixed; inset: 0; background: var(--white); z-index: 99999;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
      transition: opacity .6s var(--eX), visibility .6s;
    }
    #loader.gone { opacity: 0; visibility: hidden; }
    #loader img  { height: 52px; opacity: 0; animation: fadeIn .6s .2s forwards; }
    .lbar        { width: 200px; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
    .lfill       { height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); animation: fill 1.3s var(--eX) forwards; }

    /* ── HEADER ────────────────────────────── */
    #header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      transition: background .4s var(--eIO), box-shadow .4s, transform .45s var(--eX);
    }
    #header.up { transform: translateY(-100%); }
    #header.bg { background: var(--blue); backdrop-filter: blur(18px); box-shadow: 0 2px 10px rgba(0,0,0,.35); }

    .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
    .nav-logo img { height: 44px; filter: brightness(0) invert(1); opacity: .92; transition: opacity .2s; }
    .nav-logo img:hover { opacity: 1; }

    .nav-links { display: flex; align-items: center; gap: 2px; }
    .nav-links a {
      font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
      color: rgba(255,255,255,.7); padding: 8px 14px; border-radius: 4px;
      position: relative; transition: color .25s;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px;
      height: 2px; background: var(--orange);
      transform: scaleX(0); transform-origin: left; transition: transform .3s var(--eX);
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { transform: scaleX(1); }
    .nav-cta {
      color: var(--white) !important; background: var(--blue) !important;
      padding: 10px 22px !important; border-radius: 4px !important;
      transition: background .25s, transform .2s !important;
    }
    .nav-cta:hover { background: var(--orange) !important; transform: translateY(-1px); }
    .nav-cta::after { display: none !important; }

    .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
    .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .3s, opacity .3s; }
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mob-menu {
      display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0;
      background: rgba(10,21,32,.97); backdrop-filter: blur(20px);
      flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 999;
      opacity: 0; transform: translateY(-12px); transition: opacity .35s var(--eX), transform .35s var(--eX);
    }
    .mob-menu.open { display: flex; opacity: 1; transform: translateY(0); }
    .mob-menu a { font-size: 26px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.65); padding: 10px 32px; transition: color .2s; }
    .mob-menu a:hover { color: var(--orange); }

    /* ── HERO ──────────────────────────────── */
    #hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; overflow: hidden; background: var(--black); }
    .hero-slides { position: absolute; inset: 0; }
    .hero-slide  { position: absolute; inset: 0; opacity: 0; background-size: cover; background-position: center; transition: opacity 1.2s var(--eIO); }
    .hero-slide.on { opacity: 1; }
    .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(10,21,32,.85) 0%, rgba(10,21,32,.45) 55%, rgba(10,21,32,.15) 100%); }
    .hero-slide:nth-child(1) { background-image: url('images/carrete-encabezado-1.jpg'); background-color: var(--blue-deep); }
    .hero-slide:nth-child(2) { background-image: url('images/Carrete-encabezado-2.jpg'); background-color: var(--blue-brand); }

    .hero-content { position: relative; z-index: 2; max-width: 780px; }

    .hero-tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
      color: var(--orange); margin-bottom: 28px;
      opacity: 0; transform: translateY(20px); animation: fadeUp .8s .3s var(--eX) forwards;
    }
    .hero-tag::before { content: ''; display: block; width: 32px; height: 2px; background: var(--orange); }

    .hero-title {
      font-size: clamp(54px, 8.5vw, 112px); font-weight: 900; line-height: .92;
      text-transform: uppercase; color: var(--white); letter-spacing: -2px; margin-bottom: 32px;
      opacity: 0; transform: translateY(30px); animation: fadeUp .9s .5s var(--eX) forwards;
    }
    .hero-title em { color: var(--blue); font-style: normal; display: block; }

    .hero-sub {
      font-size: 17px; font-weight: 400; color: rgba(255,255,255,.6); line-height: 1.7;
      max-width: 520px; margin-bottom: 48px;
      opacity: 0; transform: translateY(20px); animation: fadeUp .8s .7s var(--eX) forwards;
    }
    .hero-actions {
      display: flex; gap: 16px; flex-wrap: wrap;
      opacity: 0; transform: translateY(20px); animation: fadeUp .8s .9s var(--eX) forwards;
    }

    .btn-p {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--white); background: var(--blue); padding: 16px 32px; border-radius: 4px; border: 2px solid var(--blue); cursor: pointer;
      transition: background .25s, border-color .25s, transform .2s, box-shadow .25s;
    }
    .btn-p:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(241,162,30,.3); }

    .btn-o {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--white); background: transparent; padding: 16px 32px; border-radius: 4px; border: 2px solid rgba(255,255,255,.35); cursor: pointer;
      transition: border-color .25s, background .25s, transform .2s;
    }
    .btn-o:hover { border-color: var(--white); background: rgba(255,255,255,.08); transform: translateY(-2px); }

    .hero-scroll {
      position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      opacity: 0; animation: fadeIn 1s 1.4s forwards;
    }
    .hero-scroll span { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.4); }
    .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent); animation: pulse 2s infinite; }

    .hero-dots { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 12px; }
    .hero-dot  { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); border: none; cursor: pointer; transition: background .3s, transform .3s; }
    .hero-dot.on { background: var(--orange); transform: scale(1.5); }

    .hero-ctr { position: absolute; bottom: 36px; right: 40px; z-index: 2; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: 2px; }
    .hero-ctr strong { color: var(--white); font-size: 22px; }

    /* ── STATS ─────────────────────────────── */
    #stats { background: var(--blue-brand); }
    .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
    .stat-item {
      padding: 36px 24px; text-align: center;
      border-right: 1px solid rgba(255,255,255,.15);
      position: relative; overflow: hidden;
    }
    .stat-item:last-child { border-right: none; }
    .stat-item::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--orange); transform:scaleX(0); transition:transform .4s var(--eX); }
    .stat-item:hover::after { transform:scaleX(1); }
    .stat-n { font-size: 52px; font-weight: 900; color: var(--white); line-height: 1; display: block; }
    .stat-l { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 6px; display: block; }

    /* ── REVEAL ────────────────────────────── */
    .rev { opacity: 0; transform: translateY(40px); transition: opacity .75s var(--eX), transform .75s var(--eX); }
    .rev.in { opacity: 1; transform: translateY(0); }
    .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .d5{transition-delay:.5s}

    /* ── SECTION LABEL / TITLE ─────────────── */
    .slabel {
      display: inline-flex; align-items: center; gap: 12px;
      font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
      color: var(--blue); margin-bottom: 16px;
    }
    .slabel::before { content:''; display:block; width:28px; height:2px; background:var(--orange); }
    .slabel.lt { color: var(--orange); }
    .slabel.lt::before { background: var(--orange); }
    .stitle { font-weight: 900; text-transform: uppercase; line-height: .92; }

    /* ── NOSOTROS ──────────────────────────── */
    #nosotros { padding: 120px 0; background: var(--white); }
    .nos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }

    .nos-left .stitle { font-size: clamp(40px,4.5vw,68px); color: var(--black); margin-bottom: 32px; }
    .nos-left .stitle span { color: var(--blue); }
    .nos-left > p { font-size: 16px; font-weight: 400; color: var(--gray-mid); line-height: 1.8; margin-bottom: 18px; }

    /* Tarjetas diferenciadores */
    .diffs { display: flex;flex-direction: row;gap: 16px;margin-top: 40px; }
    .dcard {
      display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: center;
      padding: 22px 24px; border-radius: 10px; border: 1.5px solid #E4EDF5; background: var(--white);
      transition: border-color .3s, box-shadow .3s, transform .35s var(--eX);
    }
    .dcard:hover { border-color: var(--blue); box-shadow: 0 8px 36px rgba(0,134,203,.1); transform: translateX(6px); }

    .dicon {
      width: 60px; height: 60px; border-radius: 14px;
      background: linear-gradient(135deg, var(--blue), var(--blue-brand));
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      transition: transform .35s var(--eX);
    }
    .dcard:hover .dicon { transform: scale(1.08) rotate(-4deg); }
    .dicon svg { width: 28px; height: 28px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    .dtext { display: flex; flex-direction: column; gap: 4px; }
    .dtext strong { display: block; font-size: 14px; font-weight: 700; color: var(--gray-dark); }
    .dtext p { font-size: 13px; font-weight: 400; color: var(--gray-mid); line-height: 1.6; margin: 0; }

    /* Misión / Visión */
    .mv-stack { display: flex; flex-direction: column; gap: 24px; }
    .mv-card {
      padding: 38px 34px; border-radius: 14px; position: relative; overflow: hidden;
      transition: transform .35s var(--eX), box-shadow .35s;
    }
    .mv-card:hover { transform: translateY(-5px); box-shadow: 0 24px 64px rgba(0,0,0,.14); }
    .mv-card.m { background: var(--blue); }
    .mv-card.v { background: var(--blue-deep); }
    .mv-card::before { content:''; position:absolute; top:-50px; right:-50px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.06); }
    .mv-label { display:block; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }
    .mv-card h3 { font-size:28px; font-weight:900; text-transform:uppercase; color:var(--white); margin-bottom:16px; line-height:1; }
    .mv-card p  { font-size:15px; font-weight:400; color:rgba(255,255,255,.78); line-height:1.72; }
    .mv-card p strong { color:rgba(255,255,255,.95); font-weight:700; }

    /* ── SECTORES ──────────────────────────── */
    #sectores { padding:120px 0; background:var(--blue-deep); position:relative; overflow:hidden; }
    #sectores::before { content:''; position:absolute; inset:0; background-image:url('images/Fondo-sectores-industriales-51.jpg'); background-size:cover; background-position:center; opacity:.12; }

    .sec-head { text-align:center; margin-bottom:72px; position:relative; }
    .sec-head .stitle { font-size:clamp(46px,6vw,88px); color:var(--white); margin-bottom:24px; }
    .sec-head p { font-size:16px; font-weight:400; color:rgba(255,255,255,.6); max-width:580px; margin:0 auto; line-height:1.75; }

    .sec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:80px; position:relative; }
    .sec-item {
      display:flex; flex-direction:column; align-items:center; gap:12px;
      padding:26px 10px; border-radius:12px;
      border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); backdrop-filter:blur(8px);
      transition:background .3s, border-color .3s, transform .35s var(--eX); cursor:default;
    }
    .sec-item:hover { border-color:var(--orange); transform:translateY(-6px); }
    .sec-item img { width:48px; height:48px; object-fit:contain; filter:brightness(0) invert(1); opacity:.8; transition:opacity .3s, transform .35s var(--eX); }
    .sec-item:hover img { opacity:1; transform:scale(1.12); }
    .sec-item h4 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.75); text-align:center; line-height:1.35; transition:color .3s; }
    .sec-item:hover h4 { color:var(--white); }

    .brands-sec { border-top:1px solid rgba(255,255,255,.1); padding:48px 0; overflow:hidden; }
    .brands-lbl { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--orange); text-align:center; margin-bottom:32px; }
    .brands-wrap { overflow:hidden; }
    .brands-track { display:flex; gap:56px; align-items:center; animation:marquee 30s linear infinite; width:max-content; }
    .brands-track:hover { animation-play-state:paused; }
    .brands-track img { height:34px; width:auto; filter:brightness(0) invert(1); opacity:.4; flex-shrink:0; transition:opacity .3s; }
    .brands-track img:hover { opacity:.9; }

    /* ── PRODUCTOS Y SERVICIOS (estructura original) ── */
    #productos { padding:120px 0; background:var(--gray-light); }
    .prod-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
    .prod-head .stitle { font-size:clamp(44px,5.5vw,80px); color:var(--black); }
    .prod-head .stitle span { color:var(--blue); }

    /* Pestañas principales (Productos/Servicios) */
    .ptabs {
      display: flex;
      gap: 4px;
      margin-bottom: 48px;
      background: rgba(0,0,0,.06);
      padding: 4px;
      border-radius: 8px;
      width: fit-content;
      flex-wrap: wrap;
    }
    .tabBtn {
      font-family: 'Montserrat', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gray-mid);
      padding: 10px 24px;
      border-radius: 6px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: background .25s, color .25s, box-shadow .25s;
    }
    .tabBtn.on {
      background: var(--blue);
      color: var(--white);
      box-shadow: 0 4px 20px rgba(0,134,203,.28);
    }
    .tabBtn:not(.on):hover {
      color: var(--blue);
    }

    .sub-tabBtn {
      font-family: 'Montserrat', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gray-mid);
      padding: 10px 24px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: background .25s, color .25s, box-shadow .25s;
    }

    .sub-tabBtn.on {
      font-family: 'Montserrat', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gray-mid);
      padding: 10px 24px;
      background: #D4E0EA;
      cursor: pointer;
      border-radius: 6px;
      transition: background .25s, color .25s, box-shadow .25s;
    }

    .sub-tabBtn:not(.on):hover {
      color: var(--blue);
    }

    /* Paneles principales */
    .main-panel {
      display: none;
    }
    .main-panel.on {
      display: block;
    }

    /* Subpestañas (para productos y para servicios) */
    .sub-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 48px;
      padding: 4px;
      border-radius: 8px;
      width: fit-content;
      flex-wrap: wrap;
      border: 1px solid #7A8FA0;
    }

    /* Paneles de productos y servicios (misma clase .ppanel) */
    .ppanel {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .ppanel.on {
      display: grid;
    }

    /* Galería */
    .pgallery { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--blue-deep); }
    .gslides { position:relative; width:100%; height:100%; }
    .gslide  { position:absolute; inset:0; opacity:0; transition:opacity .8s var(--eIO); }
    .gslide.on { opacity:1; }
    .gslide img { width:100%; height:100%; object-fit:cover; }

    .gcontrols { position:absolute; bottom:18px; right:18px; display:flex; gap:8px; }
    .gbtn {
      width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.52); backdrop-filter:blur(8px);
      border:none; color:var(--white); font-size:18px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:background .2s, transform .2s;
    }
    .gbtn:hover { background:var(--blue); transform:scale(1.1); }
    .gdots { position:absolute; bottom:20px; left:20px; display:flex; gap:6px; }
    .gdot  { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:background .25s, transform .25s; }
    .gdot.on { background:var(--orange); transform:scale(1.6); }

    /* Info de productos/servicios */
    .pinfo h3  { font-size:38px; font-weight:900; text-transform:uppercase; color:var(--black); line-height:1; margin-bottom:14px; }
    .ptag  { display:inline-block; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--blue); background:rgba(0,134,203,.1); padding:4px 12px; border-radius:4px; margin-bottom:20px; }
    .pinfo p { font-size:15px; font-weight:400; color:var(--gray-mid); line-height:1.8; margin-bottom:32px; }
    .ptags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
    .chip  { font-size:11px; font-weight:600; color:var(--gray-dark); background:var(--white); border:1.5px solid #D4E0EA; padding:6px 14px; border-radius:40px; transition:border-color .2s, color .2s; }
    .chip:hover { border-color:var(--blue); color:var(--blue); }

    /* ── MODAL POSTULACIÓN ─────────────────── */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 10000;
      display: none;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .modal-overlay.show {
      display: flex;
      opacity: 1;
    }
    .modal-content {
      background: rgba(255, 255, 255, 0.854);
      width: 90%;
      max-width: 550px;
      border-radius: 15px;
      padding: 40px;
      position: relative;
      box-shadow: 0 30px 60px rgba(0,0,0,0.4);
      transform: scale(0.9);
      transition: transform 0.3s var(--eX);
      max-height: 90vh;
      overflow-y: auto;
    }
    .modal-overlay.show .modal-content {
      transform: scale(1);
    }
    .modal-close {
      position: absolute;
      top: 20px;
      right: 24px;
      background: none;
      border: none;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      color: var(--gray-mid);
      transition: color 0.2s;
    }
    .modal-close:hover {
      color: var(--orange);
    }
    .modal-content h2 {
      font-size: 32px;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--blue-deep);
      margin-bottom: 8px;
    }
    .modal-content p {
      color: var(--gray-mid);
      margin-bottom: 28px;
      font-size: 14px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 5px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid #E4EDF5;
      border-radius: 8px;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      transition: border-color 0.2s;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--blue);
    }
    .form-group input[type="file"] {
      padding: 8px 12px;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }
    .btn-modal {
      background: var(--blue);
      color: white;
      border: none;
      padding: 16px 32px;
      border-radius: 8px;
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      font-size: 12px;
      cursor: pointer;
      width: 100%;
      transition: background 0.25s, transform 0.2s;
    }
    .btn-modal:hover {
      background: var(--orange);
      transform: translateY(-2px);
    }

    /* ── CONTACTO ──────────────────────────── */
    #contacto { padding:120px 0 0; background:var(--black); position:relative; overflow:hidden; }
    #contacto::before { content:''; position:absolute; inset:0; background-image:url('images/fondo-contacto-50.jpg'); background-size:cover; background-position:center; opacity:.07; }

    .ctc-head { text-align:center; margin-bottom:80px; position:relative; }
    .ctc-head .stitle { font-size:clamp(52px,7vw,100px); color:var(--white); margin-bottom:20px; }
    .ctc-head p { font-size:16px; font-weight:400; color:rgba(255,255,255,.48); max-width:520px; margin:0 auto; line-height:1.75; }

    .ctc-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:64px; position:relative; }

    .ctc-card {
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
      border-radius:16px; padding:40px 36px;
      display:flex; flex-direction:column;
      transition:background .3s, border-color .3s, transform .35s var(--eX);
    }
    .ctc-card:hover { background:rgba(255,255,255,.07); border-color:rgba(0,134,203,.45); transform:translateY(-5px); }

    .ctc-icon {
      width:54px; height:54px; border-radius:14px;
      background:linear-gradient(135deg, var(--blue), var(--blue-brand));
      display:flex; align-items:center; justify-content:center;
      margin-bottom:20px; flex-shrink:0;
      transition:transform .35s var(--eX);
    }
    .ctc-card:hover .ctc-icon { transform:scale(1.08) rotate(-3deg); }
    .ctc-icon svg { width:24px; height:24px; stroke:var(--white); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

    .ctc-lbl { display:block; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:6px; }
    .ctc-card h3 {
      font-size:20px; font-weight:800; text-transform:uppercase; color:var(--white);
      margin-bottom:24px; line-height:1.1;
      border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:16px;
    }

    .addrs { display:flex; flex-direction:column; gap:12px; }
    .addr  { padding:14px 18px; background:rgba(255,255,255,.04); border-radius:8px; border-left:3px solid var(--blue); }
    .addr-rgn { display:block; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:5px; }
    .addr a, .addr p { display:block; font-size:13px; font-weight:400; color:rgba(255,255,255,.65); line-height:1.55; transition:color .2s; }
    .addr a:hover { color:var(--white); text-decoration:underline; }

    .emails { display:flex; flex-direction:column; gap:10px; }
    .elink {
      display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:10px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.72); font-size:14px; font-weight:500;
      transition:background .25s, border-color .25s, color .25s, transform .25s var(--eX);
    }
    .elink:hover { background:var(--blue); border-color:var(--blue); color:var(--white); transform:translateX(5px); }
    .elink svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; opacity:.7; transition:opacity .2s; }
    .elink:hover svg { opacity:1; }

    .ctc-map { height:360px; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
    .ctc-map iframe { width:100%; height:100%; border:0; filter:grayscale(80%) invert(88%) hue-rotate(175deg); transition:filter .5s var(--eIO); }
    .ctc-map:hover iframe { filter:grayscale(20%) invert(0%) hue-rotate(0deg); }

    /* ── FOOTER ────────────────────────────── */
    #footer { background:var(--black); border-top:1px solid rgba(255,255,255,.07); padding:28px 0; }
    .ft-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
    .ft-inner img { height:30px; filter:brightness(0) invert(1); opacity:.5; }
    .ft-copy { font-size:12px; font-weight:500; color:rgba(255,255,255,.3); letter-spacing:.5px; }
    .ft-links { display:flex; gap:24px; }
    .ft-links a { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.3); transition:color .2s; }
    .ft-links a:hover { color:var(--orange); }

    /* ── RESPONSIVE ────────────────────────── */
    @media (max-width:1024px) {
      .nos-grid  { grid-template-columns:1fr; gap:60px; }
      .sec-grid  { grid-template-columns:repeat(4,1fr); }
      .prod-head { flex-direction: column; align-items: flex-start; gap:20px; }
      .ppanel.on { grid-template-columns:1fr; gap:40px; }
      .ctc-grid  { grid-template-columns:1fr; }
      .stats-grid{ grid-template-columns:repeat(2,1fr); }
      .stat-item:nth-child(2){ border-right:none; }
    }
    @media (max-width:768px) {
      .nav-links,.nav-cta { display:none; }
      .nav-toggle { display:flex; }
      .sec-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
      .stats-grid { grid-template-columns:repeat(2,1fr); }
      .ft-inner { flex-direction:column; align-items:flex-start; }
      .form-row { grid-template-columns:1fr; }
    }
    @media (max-width:480px) {
      .container { padding:0 20px; }
      .sec-grid { grid-template-columns:repeat(2,1fr); }
      .hero-actions { flex-direction:column; }
      .btn-p,.btn-o { width:100%; justify-content:center; }
      .ctc-card { padding:28px 22px; }
      .diffs {display: flex;flex-direction: row;gap: 16px;margin-top: 40px;flex-wrap: wrap;}
      .pgallery { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--blue-deep); width:90%}
    }