/* ============================================================
   CAMPO & HACIENDA · Tecnología (landing)
   Piezas propias de esta página: chips de módulos y barra de
   confianza del hero, y la grilla del "tour" de cuatro vistas.
   No se toca estilo.css: todo lo de acá es aditivo y usa los
   mismos tokens (colores, tipografías, ritmo) del sistema base.
   ============================================================ */

/* ---------- Chips de módulos, dentro del hero oscuro ---------- */
.tec-chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  list-style:none; margin:1.5rem 0 0; padding:0;
}
.tec-chips li{
  font-family:var(--dato); font-size:.74rem; letter-spacing:.03em;
  color:var(--verde-cl); background:rgba(127,176,58,.1);
  border:1px solid rgba(127,176,58,.3); border-radius:99px;
  padding:.42rem .85rem; margin:0; line-height:1;
}

/* ---------- Barra de confianza del hero ---------- */
.tec-hero__confianza{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  margin-top:1.3rem;
}
.tec-hero__confianza span{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.86rem; color:var(--gris-cl);
}
.tec-conf__ico{ width:16px; height:16px; flex-shrink:0; stroke:var(--verde-cl); fill:none; stroke-width:2; }

/* ---------- Tour de cuatro vistas ---------- */
.tour{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(233,234,226,.14); border:1px solid rgba(233,234,226,.14);
}
.tour__item{
  background:var(--ink-2); padding:clamp(1.2rem,2.4vw,1.6rem);
  display:flex; flex-direction:column; gap:.85rem;
  transition:background-color .2s ease;
}
.tour__item:hover{ background:var(--ink-3); }
.tour__etq{
  align-self:flex-start; font-family:var(--dato); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--verde-cl);
  background:var(--ink); border:1px solid var(--ink-3); border-radius:99px;
  padding:.3rem .7rem;
}
.tour__mini{ width:100%; height:auto; aspect-ratio:200/110; display:block; }
.tour__item p{ margin:0; font-size:.88rem; color:var(--gris-cl); line-height:1.5; }

@media (max-width: 900px){
  .tour{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .tour{ grid-template-columns:1fr; }
  .tec-hero__confianza{ gap:.6rem 1.1rem; }
}

/* Los contadores arrancan en 0 y suben al valor real vía JS (tecnologia.js).
   Si el script no corre (bloqueado, error), el valor final ya está en el
   marcado como texto de respaldo — ver el atributo data-hasta en el HTML. */
.js-contador{ font-variant-numeric:tabular-nums; }