/* Elite minimal base layer (Tailwind handles most) */

:root{color-scheme:dark}

/* Overlay textures */
.noise{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.gridlines{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(closest-side at 50% 40%, rgba(0,0,0,1), rgba(0,0,0,.2), rgba(0,0,0,0));
}
.hero-vignette{
  background: radial-gradient(1200px 700px at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.82) 100%);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius: 999px;
  padding: .85rem 1.05rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  will-change: transform;
}
.btn:hover{color: rgba(255,255,255,.94); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18)}
.btn:active{transform: scale(.98)}
.btn--primary{background: linear-gradient(90deg, rgba(109,255,251,.18), rgba(255,43,214,.14), rgba(183,255,95,.14)); border-color: rgba(109,255,251,.22); color: rgba(255,255,255,.92)}
.btn--ghost{background: rgba(255,255,255,.03)}
.btn--sm{padding:.65rem .95rem; font-size:.7rem}

/* Chips */
.chip{
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: .45rem .75rem;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}


/* Project Cards */
.project-card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  min-height: 240px;
  padding: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 90px rgba(0,0,0,.35);
}
.project-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 240px at 10% 15%, rgba(109,255,251,.12), transparent 60%),
    radial-gradient(520px 240px at 70% 30%, rgba(255,43,214,.10), transparent 60%);
  opacity:.9;
}
.project-card::after{
  content:"";
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(11,13,18,.90) 0%,
    rgba(11,13,18,.70) 55%,
    rgba(11,13,18,.20) 82%,
    rgba(11,13,18,0) 100%
  );
}

.project-body{ position: relative; z-index: 4; }
.project-body h3, .project-body p{ text-shadow: 0 10px 40px rgba(0,0,0,.60); }
.project-body p{ max-width: 60ch; }

.project-thumb{ position: relative; z-index: 2; }
.project-top{display:flex; align-items:center; justify-content:space-between}
.dot{height:8px;width:8px;border-radius:999px;background:#6dfffb; box-shadow: 0 0 18px rgba(109,255,251,.45)}
.dot--hot{background:#ff2bd6; box-shadow:0 0 18px rgba(255,43,214,.45)}
.dot--neon2{background:#b7ff5f; box-shadow:0 0 18px rgba(183,255,95,.35)}

@media (min-width: 768px){
  .project-card{
    grid-template-columns: 1fr 420px;
    align-items: end;
    gap: 22px;
    padding: 26px;
  }
}
@media (min-width: 1024px){
  .project-card{ grid-template-columns: 1fr 480px; }
}

/* Click target: let links stay clickable */
.project-hit{
  position:absolute;
  inset:0;
  z-index:2; /* below content (z=4), above background */
  background:transparent;
  border:0;
  cursor:pointer;
}
/* Horizontal panels */
.h-panel{
  flex: 0 0 auto;
  width: min(420px, 84vw);
  height: 320px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
}
.h-panel::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(520px 220px at 20% 20%, rgba(109,255,251,.12), transparent 60%),
              radial-gradient(520px 220px at 80% 80%, rgba(183,255,95,.10), transparent 60%);
}
.h-panel-inner{position:relative; z-index:2; padding: 26px}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
}


/* Project screenshots (glass overlay) */

.project-shot{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.project-shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.06) contrast(1.05);
  transform: scale(1.02);
}

.project-shot{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #0b0f14; /* fondo solido */
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.project-shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
  filter: none;
}

.project-shot__glass{
  display: none !important;
}

@media (max-width: 680px){
  .project-shot{
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 680px){
  .project-thumb{position:relative; margin-top:18px; width:100%;}

  .project-shot{aspect-ratio: 16 / 9;}
}



/* Mobile tightening */
@media (max-width: 420px){
  .btn{
    padding: .72rem .9rem;
    letter-spacing: .16em;
  }
  header nav .btn{
    padding: .68rem .85rem;
  }
  .project-card{
    padding: 18px;
    min-height: unset;
  }
}