/* ===== Tech ===== */
.tech .tech__intro{ max-width: 920px; margin: 0 auto 1.2rem; text-align:center; }
.tech__kicker{ font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.tech__title{
  margin:.4rem 0 .6rem; color:#fff;
  font-size: clamp(1.3rem, .9rem + 2.2vw, 2rem);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.tech__lead{ color:#cfe7e4; margin:0 auto 1rem; max-width:65ch; }

/* Grid de tarjetas */
.tech__grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px){ .tech__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .tech__grid{ grid-template-columns: 1fr; } }

.tech__card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tech__card:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  border-color: rgba(212,175,55,.45); /* oro sutil en hover */
}
.tech__group{
  margin:0 0 .5rem; color: var(--gold); font-weight:800; letter-spacing:.3px;
}

/* Chips */
.tech__chips{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem;
}
.tech__chips li{
  display:inline-block;
  padding:.35rem .6rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(8,12,16,.40), rgba(8,12,16,.28));
  color:#e6f0ee; font-size:.9rem;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* Tarjeta de tecnología propia con motivo geométrico */
.tech__card--own{
  position:relative;
  background:
    radial-gradient(600px 380px at 80% -10%, rgba(31,142,140,.18), transparent 60%),
    rgba(255,255,255,.04);
  border-color: rgba(65,140,143,.45);
}
.tech__card--own::after{
  content:""; position:absolute; right:0; bottom:0; width:100px; height:20px;
  background: linear-gradient(180deg, rgba(212,175,55,.28), rgba(31,142,140,.12));
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 24h12v-6h12v-6h12v-6h12V0h12v6h12v6h12v6h12v6h12v-6h12v-6h12v-6h12V0h12v24H0z' fill=\"black\"/>\
  </svg>") right/cover no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 24h12v-6h12v-6h12v-6h12V0h12v6h12v6h12v6h12v6h12v-6h12v-6h12v-6h12V0h12v24H0z' fill=\"black\"/>\
  </svg>") right/cover no-repeat;
  opacity:.9;
}
.tech__note{ display:block; margin-top:.5rem; color:#9ecac6; font-size:.82rem; }

/* Imagen / mockup con badge */
.tech__media{
  margin-top:1.2rem; position:relative; border-radius:16px; overflow:hidden;
  border:1px solid rgba(65,140,143,.45);
  background: linear-gradient(180deg, rgba(12,18,24,.18), rgba(12,18,24,.45));
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.tech__media img{ display:block; width:100%; height:auto; }
.tech__badge{
  position:absolute; left:12px; bottom:12px;
  display:inline-block; padding:.3rem .6rem; border-radius:12px;
  background: linear-gradient(180deg, rgba(8,12,16,.40), rgba(8,12,16,.28));
  color:#f3f6f7; font-size:.82rem; letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}