/* ===========================================================
   Novaltec — Proyectos (archivo + shortcode)
   Paleta de marca · Space Grotesk + DM Sans
   Todo va namespaced en .nv-proyectos para no chocar con el tema.
   =========================================================== */


/* ---------- CABECERA ---------- */
.nv-head{
  display:flex;
  justify-content:space-between;
  align-items: flex-end;
  gap:60px;
  margin-bottom:64px;
}
.nv-head__left{max-width:560px}
.nv-title{
  font-weight:700;
  font-size:72px;
  line-height:.98;
  letter-spacing:-2px;
  margin:0 0 24px;
}
.nv-intro{
  font-size:16px;
  line-height:1.6;
  max-width:480px;
  margin:0;
}


/* ---------- FILTROS (derecha) ---------- */
.nv-filters{
  display:flex;
  gap:32px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-top:12px;
  margin-left:auto;
}
.nv-filter{
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:none;
  border:none;
  cursor:pointer;
  padding:0 0 8px;
  position:relative;
  color:var(--contrast);
  transition:color .25s ease;
}
button.nv-filter:hover,
button.nv-filter:active,
button.nv-filter:focus {
    background: transparent;
    color: var(--accent);
}
/* Línea inferior: por defecto oculta, crece desde la izquierda al hacer hover */
.nv-filter::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.nv-filter:hover::after,
.nv-filter.is-active::after{transform:scaleX(1)}

.nv-divider{height:1px;background:var(--nv-grey);opacity:.5;margin-bottom:40px}

/* ---------- RETÍCULA ---------- */
.nv-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:450px;
  gap:20px;
}
/* La tarjeta grande ocupa 2 columnas (=2fr) → patrón 1/1/2 ↔ 2/1/1 */
.nv-card--wide{grid-column:span 2}

/* Grids del shortcode (columnas homogéneas) */
.nv-grid--cols-1{grid-template-columns:1fr}
.nv-grid--cols-2{grid-template-columns:repeat(2,1fr)}
.nv-grid--cols-3{grid-template-columns:repeat(3,1fr)}
.nv-grid--cols-4{grid-template-columns:repeat(4,1fr)}
.nv-grid[data-mode="shortcode"] .nv-card--wide{grid-column:auto}

/* ---------- CARD ---------- */
.nv-card{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--nv-platinum);
  text-decoration:none;
  animation:nv-fade .6s ease both;
}
.nv-card img,
.nv-card__ph{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(0);
  transition:filter .5s ease, transform 1.2s ease;
}
.nv-card__ph{
  background:linear-gradient(135deg,#e7e7e8,#d3d4d4);
}
span.nv-card__meta span {
    color: white;
}

/* Overlay */
.nv-card::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,15,0) 35%,rgba(20,17,15,.72) 100%);
  opacity:0;
  transition:opacity .45s ease;
  z-index:1;
}

.nv-card__meta{
  position:absolute;
  left:24px;right:24px;bottom:22px;
  z-index:2;
  transform:translateY(10px);
  opacity:0;
  transition:transform .45s ease, opacity .45s ease;
}

/* --- DESKTOP: sólo dispositivos con hover real --- */
@media (hover:hover) and (pointer:fine){
  .nv-card:hover img,
  .nv-card:hover .nv-card__ph{filter:grayscale(1);transform:scale(1.04)}
  .nv-card:hover::before{opacity:1}
  .nv-card:hover .nv-card__meta{transform:translateY(0);opacity:1}
}

/* --- TÁCTIL: estado invertido --- */
@media (hover:none){
  /* Por defecto: "portada" (b/n + overlay + texto) */
  .nv-card img,
  .nv-card__ph{filter:grayscale(1)}
  .nv-card::before{opacity:1}
  .nv-card__meta{transform:translateY(0);opacity:1}

  /* Al pulsar: imagen normal, sin overlay */
  .nv-card:active img,
  .nv-card:active .nv-card__ph{filter:grayscale(0);transform:scale(1.02)}
  .nv-card:active::before{opacity:0}
  .nv-card:active .nv-card__meta{transform:translateY(10px);opacity:0}

  /* Respuesta más rápida al tacto */
  .nv-card img,
  .nv-card__ph,
  .nv-card::before,
  .nv-card__meta{transition-duration:.25s}
}

.nv-card__name{
  display:block;
  font-family:'Space Grotesk',sans-serif;
	text-transform: uppercase;
  font-weight:600;
  font-size:22px;
  line-height:1.1;
  color:var(--nv-white);
  margin-bottom:6px;
}
.nv-card__cat{
  display:block;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--nv-white);
  font-weight:500;
}

@keyframes nv-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- LOADER / SCROLL INFINITO ---------- */
.nv-sentinel{display:flex;justify-content:center;padding:48px 0 8px;min-height:40px}
.nv-loader{display:flex;gap:7px;opacity:0;transition:opacity .3s ease}
.nv-loader.is-on{opacity:1}
.nv-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--nv-teal);
  animation:nv-bounce 1s infinite ease-in-out;
}
.nv-dot:nth-child(2){animation-delay:.15s}
.nv-dot:nth-child(3){animation-delay:.3s}
@keyframes nv-bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}

.nv-empty{font-family:'DM Sans',sans-serif;color:var(--nv-graphite)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .nv-head{flex-direction:column;gap:32px}
  .nv-title{font-size:52px}
  .nv-filters{justify-content:flex-start;margin-left:0}
  .nv-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
  .nv-card--wide{grid-column:span 2}
  .nv-grid--cols-3,.nv-grid--cols-4{grid-template-columns:repeat(2,1fr)}
  .nv-head{
    margin-bottom: 48px;
  }
  .post-type-archive-proyecto .inside-article {
    padding-bottom: 0;
}
}
@media(max-width:560px){
  .nv-grid{grid-template-columns:1fr;grid-auto-rows:240px}
  .nv-card--wide{grid-column:span 1}
  .nv-grid--cols-2,.nv-grid--cols-3,.nv-grid--cols-4{grid-template-columns:1fr}
  .nv-card__meta{left:18px;right:18px;bottom:16px}
  .nv-card__name{font-size:18px}
}