/* ============================================================================
   FEED DE TRABAJOS REALIZADOS — Cortinas Metálicas SM
   ----------------------------------------------------------------------------
   Sistema de diseño:
   Color   → grafito industrial (no negro puro) + acento naranja de marca,
             usado con moderación (solo CTA, destacados, estados activos).
   Tipo    → Barlow Condensed (encabezados, condensado, tono "placa
             industrial") + Barlow (texto de lectura).
   Firma   → las publicaciones se revelan con un barrido vertical que imita
             una cortina metálica subiendo, disparado una vez al entrar en
             pantalla. Es el único momento de "espectáculo" de la página.
   ========================================================================= */

.nv-feed-scope{
  --nv-bg:        #12161c;
  --nv-superficie:#1b212a;
  --nv-superficie-2:#232a34;
  --nv-linea:     rgba(255,255,255,.08);
  --nv-texto:     #edeff2;
  --nv-texto-tenue:#8d95a1;
  --nv-acento:    #e8641b;
  --nv-acento-suave: rgba(232,100,27,.14);
  --nv-radio:     10px;
  --nv-fuente-titular: 'Barlow Condensed', 'Oswald', Arial, sans-serif;
  --nv-fuente-texto:   'Barlow', 'Segoe UI', Arial, sans-serif;

  background: var(--nv-bg);
  color: var(--nv-texto);
  font-family: var(--nv-fuente-texto);
  padding-bottom: 3rem;
}

.nv-feed-scope *{ box-sizing:border-box; }
.nv-feed-scope a{ color:inherit; }
.nv-feed-scope img{ max-width:100%; display:block; }

/* ---------------------------------------------------------------------------
   BARRA SUPERIOR (propia de esta sección, sticky, discreta)
--------------------------------------------------------------------------- */
.nv-topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .75rem 1.25rem;
  margin-top: 14px;
  background: rgba(18,22,28,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nv-linea);
}
/* Detalle de marca: franja de "cinta industrial" delgada, discreta */
.nv-topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:3px;
  background: repeating-linear-gradient(
    -45deg,
    var(--nv-acento) 0 8px,
    transparent 8px 16px
  );
  opacity:.35;
}
.nv-topbar-marca{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
}
.nv-topbar-icono{
  width:34px; height:34px; flex:0 0 auto;
  border-radius:8px;
  background: var(--nv-superficie-2);
  border:1px solid var(--nv-linea);
  display:flex; align-items:center; justify-content:center;
  color: var(--nv-acento);
  font-size:1rem;
}
.nv-topbar-texto{ min-width:0; line-height:1.15; }
.nv-topbar-texto strong{
  display:block;
  font-family: var(--nv-fuente-titular);
  font-weight:600;
  letter-spacing:.02em;
  font-size:1rem;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nv-topbar-texto span{
  display:block;
  font-size:.72rem;
  color: var(--nv-texto-tenue);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.nv-topbar-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background: var(--nv-acento);
  color:#fff;
  font-weight:600;
  font-size:.82rem;
  text-decoration:none;
  white-space:nowrap;
  transition: filter .15s, transform .15s;
}
.nv-topbar-cta:hover{ filter:brightness(1.08); }
.nv-topbar-cta:active{ transform: scale(.97); }
.nv-topbar-cta i{ font-size:.85rem; }

@media (max-width:480px){
  .nv-topbar{ padding:.6rem .85rem; }
  .nv-topbar-cta span{ display:none; } /* en celular, solo ícono + "Cotizar" corto */
}

/* ---------------------------------------------------------------------------
   ENCABEZADO DEL FEED
--------------------------------------------------------------------------- */
.nv-feed-header{
  max-width: 720px;
  margin: 2.25rem auto 1.25rem;
  padding: 0 1.25rem;
  text-align:left;
}
.nv-feed-header .nv-eyebrow{
  display:inline-block;
  font-family: var(--nv-fuente-titular);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--nv-acento);
  margin-bottom:.4rem;
}
.nv-feed-header h1{
  font-family: var(--nv-fuente-titular);
  font-weight:600;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  letter-spacing:.01em;
  color:#fff;
  margin:0 0 .35rem;
  line-height:1.1;
}
.nv-feed-header p{
  margin:0;
  color: var(--nv-texto-tenue);
  font-size:.95rem;
  max-width:46ch;
}

/* ---------------------------------------------------------------------------
   FEED — columna centrada, ancho de lectura cómodo
--------------------------------------------------------------------------- */
.nv-feed{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display:flex;
  flex-direction:column;
  gap: 1.5rem;
}

@media (max-width:600px){
  .nv-feed{ padding:0 .6rem; gap:1rem; }
  .nv-feed-header{ padding:0 .9rem; margin:1.5rem auto 1rem; }
}

/* ---------------------------------------------------------------------------
   TARJETA DE PUBLICACIÓN
--------------------------------------------------------------------------- */
.nv-post{
  background: var(--nv-superficie);
  border: 1px solid var(--nv-linea);
  border-radius: var(--nv-radio);
  overflow:hidden;
}
.nv-post.nv-destacado{
  border-color: rgba(232,100,27,.35);
  box-shadow: inset 3px 0 0 var(--nv-acento);
}

@media (max-width:600px){
  /* En celular: casi a todo el ancho, sin borde redondeado exagerado */
  .nv-post{ border-radius:6px; }
}

/* Encabezado de la publicación */
.nv-post-head{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding: .9rem 1.1rem .7rem;
}
.nv-post-avatar{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:9px;
  background: var(--nv-superficie-2);
  border:1px solid var(--nv-linea);
  display:flex; align-items:center; justify-content:center;
  color: var(--nv-acento);
  font-size:1.05rem;
}
.nv-post-quien{ min-width:0; flex:1; line-height:1.3; }
.nv-post-quien strong{
  display:block; font-size:.92rem; color:#fff; font-weight:600;
}
.nv-post-quien .nv-post-meta{
  font-size:.78rem; color: var(--nv-texto-tenue);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nv-post-destacado-tag{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--nv-acento);
  background: var(--nv-acento-suave);
  border:1px solid rgba(232,100,27,.3);
  padding:.28rem .55rem;
  border-radius:999px;
}

/* Descripción */
.nv-post-desc{
  padding: 0 1.1rem .8rem;
  font-size:.93rem;
  line-height:1.55;
  color: #d3d7dc;
}

/* ---------------------------------------------------------------------------
   MOSAICO DE FOTOS — se adapta según la cantidad (1 a 5+)
--------------------------------------------------------------------------- */
.nv-fotos{
  display:grid;
  gap:2px;
  background: var(--nv-linea);
}
.nv-foto{
  position:relative;
  overflow:hidden;
  background:#0a0c10;
  cursor:zoom-in;
}
.nv-foto img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
}
.nv-foto:hover img{ transform: scale(1.035); }

/* 1 foto: protagonista, ancho completo */
.nv-fotos[data-fotos="1"]{ grid-template-columns: 1fr; }
.nv-fotos[data-fotos="1"] .nv-foto{ aspect-ratio: 16/10; }

/* 2 fotos: mitad y mitad */
.nv-fotos[data-fotos="2"]{ grid-template-columns: 1fr 1fr; }
.nv-fotos[data-fotos="2"] .nv-foto{ aspect-ratio: 1/1; }

/* 3 fotos: una grande + dos apiladas */
.nv-fotos[data-fotos="3"]{
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.nv-fotos[data-fotos="3"] .nv-foto:nth-child(1){ grid-row: 1 / 3; aspect-ratio: auto; }
.nv-fotos[data-fotos="3"] .nv-foto:nth-child(2),
.nv-fotos[data-fotos="3"] .nv-foto:nth-child(3){ aspect-ratio: 1/1; }

/* 4 fotos: cuadrícula 2x2 */
.nv-fotos[data-fotos="4"]{ grid-template-columns: 1fr 1fr; }
.nv-fotos[data-fotos="4"] .nv-foto{ aspect-ratio: 1/1; }

/* 5 o más: 2x2 visibles + indicador "+N" sobre la última */
.nv-fotos[data-fotos="5"]{ grid-template-columns: 1fr 1fr; }
.nv-fotos[data-fotos="5"] .nv-foto{ aspect-ratio: 1/1; }
.nv-fotos[data-fotos="5"] .nv-foto:nth-child(n+5){ display:none; } /* de la 5a en adelante, ocultas visualmente (siguen en el DOM para la galería) */
.nv-mas-overlay{
  position:absolute; inset:0;
  background: rgba(10,12,16,.62);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--nv-fuente-titular);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.02em;
}

/* ---------------------------------------------------------------------------
   ETIQUETAS TÉCNICAS
--------------------------------------------------------------------------- */
.nv-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  padding: .9rem 1.1rem 0;
}
.nv-tag{
  font-family: var(--nv-fuente-texto);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color: var(--nv-texto-tenue);
  background: var(--nv-superficie-2);
  border:1px solid var(--nv-linea);
  padding:.32rem .6rem;
  border-radius:6px;
}

/* ---------------------------------------------------------------------------
   ACCIONES
--------------------------------------------------------------------------- */
.nv-post-acciones{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding: .9rem 1.1rem 1.05rem;
  border-top: 1px solid var(--nv-linea);
  margin-top: .9rem;
}
.nv-accion-sec{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:none;
  color: var(--nv-texto-tenue);
  font-size:.8rem; font-weight:600;
  padding:.4rem .55rem;
  border-radius:7px;
  cursor:pointer;
  transition: background .15s, color .15s;
}
.nv-accion-sec:hover{ background: var(--nv-superficie-2); color:#fff; }
.nv-post-acciones .nv-spacer{ flex:1; }
.nv-btn-cotizar{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.05rem;
  border-radius:999px;
  background: var(--nv-acento);
  color:#fff;
  font-weight:700;
  font-size:.83rem;
  text-decoration:none;
  white-space:nowrap;
  transition: filter .15s, transform .15s;
}
.nv-btn-cotizar:hover{ filter:brightness(1.08); }
.nv-btn-cotizar:active{ transform:scale(.97); }

@media (max-width:420px){
  .nv-post-acciones{ flex-wrap:wrap; }
  .nv-btn-cotizar{ width:100%; justify-content:center; order:3; margin-top:.3rem; }
}

/* ---------------------------------------------------------------------------
   "CARGAR MÁS"
--------------------------------------------------------------------------- */
.nv-cargar-mas-wrap{
  display:flex; justify-content:center;
  margin-top:.5rem;
}
.nv-cargar-mas{
  padding:.7rem 1.6rem;
  border-radius:999px;
  border:1px solid var(--nv-linea);
  background: var(--nv-superficie);
  color:#fff;
  font-family: var(--nv-fuente-titular);
  font-weight:600;
  letter-spacing:.03em;
  font-size:.9rem;
  cursor:pointer;
  transition: border-color .15s, background .15s;
}
.nv-cargar-mas:hover{ border-color: var(--nv-acento); background: var(--nv-superficie-2); }

/* Publicaciones ocultas por paginación (aún en el HTML por SEO, no visibles) */
.nv-oculto-inicial{ display:none; }

/* Estado vacío */
.nv-vacio{
  text-align:center;
  padding: 3rem 1.5rem;
  color: var(--nv-texto-tenue);
}
.nv-vacio i{ font-size:1.6rem; color: var(--nv-acento); margin-bottom:.6rem; display:block; }

/* ---------------------------------------------------------------------------
   REVELADO "CORTINA" — firma visual de la página.
   100% CSS (no depende de JavaScript), para que las publicaciones SIEMPRE
   se vean aunque algún script falle o no cargue.
--------------------------------------------------------------------------- */
@keyframes nv-revelar{
  from{ opacity:0; clip-path: inset(0 0 100% 0); transform: translateY(6px); }
  to  { opacity:1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
.nv-post{
  animation: nv-revelar .55s cubic-bezier(.2,.7,.2,1) both;
}
.nv-post:nth-child(1){ animation-delay:.02s; }
.nv-post:nth-child(2){ animation-delay:.08s; }
.nv-post:nth-child(3){ animation-delay:.14s; }
.nv-post:nth-child(4){ animation-delay:.20s; }
.nv-post:nth-child(5){ animation-delay:.26s; }
.nv-post:nth-child(n+6){ animation-delay:.30s; }

@media (prefers-reduced-motion: reduce){
  .nv-post{ animation:none; opacity:1; clip-path:none; transform:none; }
}

/* ---------------------------------------------------------------------------
   LIGHTBOX
--------------------------------------------------------------------------- */
.nv-lightbox{
  position:fixed; inset:0; z-index:100;
  background: rgba(6,7,9,.94);
  display:none;
  align-items:center; justify-content:center;
  padding: 1rem;
}
.nv-lightbox.nv-abierto{ display:flex; }
.nv-lightbox-img{
  max-width:min(92vw, 1100px);
  max-height:88vh;
  object-fit:contain;
  border-radius:4px;
}
.nv-lightbox-cerrar,
.nv-lightbox-prev,
.nv-lightbox-next{
  position:absolute;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:1.05rem;
  transition: background .15s;
}
.nv-lightbox-cerrar:hover,
.nv-lightbox-prev:hover,
.nv-lightbox-next:hover{ background: rgba(255,255,255,.18); }
.nv-lightbox-cerrar{ top:1rem; right:1rem; }
.nv-lightbox-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.nv-lightbox-next{ right:1rem; top:50%; transform:translateY(-50%); }
.nv-lightbox-contador{
  position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  color: var(--nv-texto-tenue);
  font-size:.8rem; letter-spacing:.04em;
}
@media (max-width:600px){
  .nv-lightbox-prev, .nv-lightbox-next{ width:38px; height:38px; }
}