/* ── TECNOLOGÍA ── */
#tecnologia {
  background: var(--dark);
  display: flex; gap: 6rem; align-items: center;
  flex-wrap: wrap;
}
#tecnologia .sec-label { color: var(--accent); }
#tecnologia .sec-title { color: #fff; }
#tecnologia .sec-sub { color: rgba(232,230,220,0.55); }

.tech-content { flex: 1; min-width: 280px; }
.tech-3d { flex: 1; min-width: 280px; display: flex; justify-content: center; }

/* Cubo 3D */
.cube-scene {
  perspective: 700px;
  width: 200px; height: 200px;
}
.cube {
  width: 200px; height: 200px;
  position: relative; transform-style: preserve-3d;
  animation: cubeRotate 12s linear infinite;
}
@keyframes cubeRotate {
  from { transform: rotateX(20deg) rotateY(0deg); }
  to   { transform: rotateX(20deg) rotateY(360deg); }
}
.cube-face {
  position: absolute; width: 200px; height: 200px;
  border: 1px solid rgba(217,119,87,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  backdrop-filter: blur(2px);
}
.cf-front  { background: rgba(217,119,87,0.08); transform: translateZ(100px); }
.cf-back   { background: rgba(217,119,87,0.05); transform: rotateY(180deg) translateZ(100px); }
.cf-left   { background: rgba(217,119,87,0.05); transform: rotateY(-90deg) translateZ(100px); }
.cf-right  { background: rgba(217,119,87,0.08); transform: rotateY(90deg) translateZ(100px); }
.cf-top    { background: rgba(217,119,87,0.06); transform: rotateX(90deg) translateZ(100px); }
.cf-bottom { background: rgba(217,119,87,0.04); transform: rotateX(-90deg) translateZ(100px); }

/* Carrusel: grilla 6×8 (responsive), celdas justificadas / mismo ancho */
.tech-pills-carousel {
  margin-top: 8rem;
  position: relative;
}
.tech-pills-viewport {
  --tech-gap-y: 0.55rem;
  --tech-gap-x: 0.5rem;
  --tech-cell-h: 2.45rem;
  --tech-rows: 8;
  --tech-vp-h: calc(
    var(--tech-rows) * var(--tech-cell-h) +
    (var(--tech-rows) - 1) * var(--tech-gap-y)
  );
  height: var(--tech-vp-h);
  overflow: hidden;
  border-radius: 16px;
}
.tech-pills-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.tech-pills-slide {
  flex: 0 0 var(--tech-vp-h);
  height: var(--tech-vp-h);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: var(--tech-cell-h);
  gap: var(--tech-gap-y) var(--tech-gap-x);
  align-content: start;
  justify-content: stretch;
  justify-items: stretch;
  padding: 2px 0;
  overflow: hidden;
}
@media (max-width: 640px) {
  .tech-pills-slide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .tech-pills-slide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#tecnologia .tech-pills-slide .pill {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.38rem 0.45rem;
  font-size: clamp(0.68rem, 1.15vw, 0.8rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-pills-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.tech-pills-dots {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.tech-pills-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(232,230,220,0.22);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.tech-pills-dot:hover {
  background: rgba(217,119,87,0.55);
}
.tech-pills-dot--active {
  background: var(--accent);
  transform: scale(1.25);
}
.tech-pills-hint {
  font-size: 0.72rem;
  color: rgba(232,230,220,0.35);
  letter-spacing: 0.04em;
}

.pill {
  padding: 0.4rem 1rem;
  border: 1px solid rgba(217,119,87,0.3);
  border-radius: 50px; font-size: 0.82rem;
  color: rgba(232,230,220,0.7);
  transition: border-color 0.2s, color 0.2s;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tech-pills-track {
    transition: none !important;
    transform: none !important;
  }
  .tech-pills-viewport {
    height: auto;
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
  }
  .tech-pills-slide {
    flex-basis: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    margin-bottom: 1.25rem;
    grid-auto-rows: auto;
    min-height: 0;
  }
  .tech-pills-slide:last-child {
    margin-bottom: 0;
  }
  #tecnologia .tech-pills-slide .pill {
    white-space: normal;
    text-overflow: unset;
    min-height: 2rem;
  }
  .tech-pills-footer .tech-pills-hint {
    display: none;
  }
}