:root{
  --primary-black:#0a0a0a;
  --carbon-dark:#121212;
  --carbon-medium:#1a1a1a;
  --metal-dark:#3a3a3a;
  --accent-purple:#9945ff;
  --accent-blue:#00a8ff;
  --text-primary:#fff;
  --text-secondary:#b0b0b0;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: Inter, "Rajdhani", "Orbitron", sans-serif;
  background: var(--primary-black);
  color:var(--text-primary);
  overflow-x:hidden;
  padding-top:72px;
}

/* header simple */
.header{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;padding:0 20px;background:rgba(18,18,18,0.95);z-index:2000}
.logo{font-weight:700;letter-spacing:1px}

/* hero + carousel */
.hero{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:60px 20px;background: radial-gradient(ellipse at center, rgba(153,69,255,0.06) 0%, transparent 50%);}
.carousel-container{width:100%;max-width:1400px;height:640px;perspective:1200px;position:relative;padding-top:20px}
.carousel{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.carousel-item{position:absolute;width:380px;height:500px;left:50%;top:50%;transform-style:preserve-3d;transition:all .8s cubic-bezier(.4,0,.2,1);cursor:pointer;transform-origin:center center}
.card{width:100%;height:100%;background:linear-gradient(135deg,var(--carbon-medium),var(--carbon-dark));border:2px solid var(--metal-dark);border-radius:20px;padding:26px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.03);display:flex;flex-direction:column}
.card-number{position:absolute;top:18px;right:22px;font-size:64px;font-weight:900;color:rgba(153,69,255,.08);font-family:Orbitron,monospace;pointer-events:none}
.card-image{width:100%;height:220px;border-radius:10px;overflow:hidden;margin-bottom:18px;border:1px solid rgba(255,255,255,.02);background:var(--carbon-dark)}
.card-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(50%) contrast(1.15);transition:transform .5s ease,filter .45s ease;display:block}
.carousel-item:hover .card-image img{transform:scale(1.08);filter:grayscale(0%) contrast(1.2)}
.card-title{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;background:linear-gradient(135deg,var(--text-primary),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.card-description{color:var(--text-secondary);font-size:14px;line-height:1.6;flex-grow:1}
.card-tech{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tech-badge{padding:6px 12px;font-size:12px;border-radius:999px;background:rgba(153,69,255,0.08);border:1px solid rgba(153,69,255,0.18);color:var(--accent-purple);text-transform:uppercase;letter-spacing:1px}
.card-cta{margin-top:14px;padding:10px 22px;border-radius:28px;border:none;cursor:pointer;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));color:#fff;box-shadow:0 6px 18px rgba(153,69,255,.22)}

.carousel-container {
  touch-action: pan-y; /* permite solo desplazamiento vertical normal, bloquea horizontal */
  overflow: hidden;
}
.carousel {
  cursor: grab;
  touch-action: none; /* asegura control total del pointer para arrastre horizontal */
}
.carousel:active {
  cursor: grabbing;
}


.carousel-controls{position:absolute;bottom:-72px;left:50%;transform:translateX(-50%);display:flex;gap:18px;z-index:1200}
.carousel-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--carbon-medium),var(--carbon-dark));border:2px solid var(--metal-dark);color:var(--accent-purple);font-size:26px;cursor:pointer;transition:transform .2s ease}
.carousel-btn:hover{transform:scale(1.06);box-shadow:0 10px 30px rgba(153,69,255,.12)}

.carousel-indicators{position:absolute;top:24px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:1200}
.indicator{width:12px;height:12px;border-radius:50%;background:rgba(60,60,60,1);border:1px solid rgba(120,120,120,.2);cursor:pointer;transition:all .25s}
.indicator.active{background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));transform:scale(1.35);box-shadow:0 0 14px rgba(153,69,255,.35)}

@media (max-width:900px){.carousel-item{width:320px;height:430px}.card-image{height:180px}}
@media (max-width:520px){.carousel-item{width:280px;height:380px}.carousel-controls{bottom:-86px}}