/* ===========================
   NUESTROS VALORES
   Tokens and shared hero styles live in base/site.css.
   .valor-block reveal (.is-visible) and the gear spin come from custom.js.
=========================== */

.page-heading-valores { background-image: url(../../Imagenes-copy/trucks-in-miningsite.jpg); background-position: center 95%; }

.bloque-valores {
  display: flex; align-items: flex-start; gap: clamp(2rem, 5vw, 5rem);
  width: min(var(--max), 100%); margin: 0 auto; padding: var(--section) 0;
}
section > .container:has(> .bloque-valores) { max-width: none; padding-inline: var(--gutter); }

.bloque-valores-text { flex: 1 1 60%; max-width: 60%; padding: 0; }
.valores-section-title {
  margin-bottom: clamp(2.5rem, 5vw, 4rem); padding: 0;
  font-size: clamp(2.4rem, 5vw, 4.75rem); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.05; text-transform: none;
}
.valor-block {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: 0; padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  background: none; border: 0; border-top: 1px solid var(--line-dark); border-radius: 0; box-shadow: none;
  opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.valor-block:last-child { border-bottom: 1px solid var(--line-dark); }
.valor-block.is-visible { opacity: 1; transform: none; }
.bloque-valores-text h4 { grid-row: span 20; margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.035em; line-height: 1.1; color: var(--white); }
.bloque-valores-text p { grid-column: 2; margin: 0 0 .75rem; font-size: 1.1rem; line-height: 1.7; color: var(--mist); }

.bloque-valores-gear {
  flex: 1 1 40%; max-width: 40%; position: sticky; top: 12vh; height: 76vh;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* Gear cluster: five cogs of different sizes packed tightly together like a
   watch mechanism, each a slightly different shade of gray for depth. Sized
   and positioned as percentages of .gear-cluster (kept clear of the left
   edge) so it never reaches into the text column next to it. */
.gear-cluster {
  position: relative;
  width: 100%;
  height: 70vh;
  max-height: 560px;
}

.gear-cluster .gear {
  position: absolute;
  display: block;
  will-change: transform;
  transform: translate(-50%, -50%) rotate(0deg);
}

.gear-xlarge {
  top: 52%;
  left: 62%;
  font-size: clamp(190px, 21vw, 300px);
  color: #eef2f8;
}

.gear-upper {
  top: 22%;
  left: 34%;
  font-size: clamp(130px, 14.5vw, 208px);
  color: #9aa8bf;
  filter: drop-shadow(-5px 4px 6px rgba(6, 14, 28, 0.3));
}

.gear-right {
  top: 24%;
  left: 84%;
  font-size: clamp(90px, 10vw, 150px);
  color: #d6dde8;
  filter: drop-shadow(-4px 3px 5px rgba(6, 14, 28, 0.25));
}

.gear-lower {
  top: 82%;
  left: 36%;
  font-size: clamp(80px, 9vw, 138px);
  color: #c1cadb;
  filter: drop-shadow(-4px 3px 5px rgba(6, 14, 28, 0.25));
}

.gear-tiny {
  top: 84%;
  left: 68%;
  font-size: clamp(46px, 5.2vw, 78px);
  color: #eef2f8;
  opacity: 0.8;
  filter: drop-shadow(-3px 2px 4px rgba(6, 14, 28, 0.25));
}

@media (max-width: 991px) {
  .bloque-valores { flex-direction: column; }
  .bloque-valores-text, .bloque-valores-gear { max-width: 100%; flex: 1 1 auto; }
  .bloque-valores-gear { position: relative; top: 0; width: 100%; height: 260px; }
  .gear-cluster {
    height: 100%;
    max-height: none;
  }
  .gear-xlarge {
    top: 50%;
    left: 58%;
    font-size: clamp(150px, 34vw, 220px);
  }
  .gear-upper {
    top: 18%;
    left: 32%;
    font-size: clamp(100px, 23vw, 150px);
  }
  .gear-right {
    top: 20%;
    left: 82%;
    font-size: clamp(70px, 16vw, 108px);
  }
  .gear-lower {
    top: 84%;
    left: 34%;
    font-size: clamp(62px, 14vw, 98px);
  }
  .gear-tiny {
    top: 86%;
    left: 66%;
    font-size: clamp(36px, 8vw, 56px);
  }
}
@media (max-width: 767px) {
  .bloque-valores-gear { display: none; }
  .valor-block { grid-template-columns: 1fr; }
  .bloque-valores-text h4 { grid-row: auto; margin-bottom: .75rem; }
  .bloque-valores-text p { grid-column: 1; }
}