/*
Theme Name: Plexx Child - Jonah Lopez 2026
Theme URI: https://jonahlopez.com
Description: Tema hijo de Plexx. Rediseno 2026.
Author: Jonah Lopez
Template: plexx
Version: 1.4.0
Text Domain: plexx-child
*/

:root{
  --jl-bg:#080808;
  --jl-fg:#f6f6f4;
  --jl-fg-3:rgba(246,246,244,.68);
  --jl-line:rgba(255,255,255,.12);
  --jl-gold:#c9a227;
}

/* ============ 1. BARRA DE CATEGORIAS ============ */
.filters-container{
  position:sticky; top:0; z-index:60;
  background:rgba(8,8,8,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--jl-line);
  padding:14px 0; margin-bottom:20px;
}
ul.portfolio-filters{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px; margin:0; padding:0 20px;
}
ul.portfolio-filters li{
  margin:0; padding:0;
  border:1px solid transparent; transition:border-color .22s;
}
ul.portfolio-filters li span{
  display:block; padding:9px 18px; letter-spacing:.16em;
  color:var(--jl-fg-3); border:0;
  transition:color .22s,background .22s;
}
ul.portfolio-filters li:hover{ border-color:var(--jl-line); }
ul.portfolio-filters li:hover span{ color:var(--jl-fg); }
ul.portfolio-filters li span.active{ background:var(--jl-fg); color:var(--jl-bg); }
ul.portfolio-filters li > span::after{
  content:attr(data-jl-count);
  font-size:10px; opacity:.5; margin-left:7px;
  vertical-align:super; letter-spacing:.04em;
}

/* ============ 2. SEPARACION ENTRE FICHAS ============
   El ancho lo fija masonry por JS. Con box-sizing:border-box
   el padding va por dentro, asi que la rejilla no se mueve. */
.plexx-wrapper.no-space .masonry-item{ padding:7px; }

/* ============ 3. IMAGEN ============ */
.masonry-item .thumb{
  overflow:hidden;
  transition:filter .45s ease;
}
.masonry-item:hover .thumb{ filter:brightness(.55); }


/* Capa de degradado propia, insertada por functions.php */
.masonry-item .thumb .jl-veil{
  position:absolute;
  left:0; right:0; bottom:0;
  height:70%;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(180deg,rgba(8,8,8,0) 0%,rgba(8,8,8,.40) 38%,rgba(8,8,8,.80) 70%,rgba(8,8,8,.96) 100%);
}

/* ============ 4. TITULO Y CATEGORIA SIEMPRE VISIBLES ============ */
.masonry-item .item-description{
  z-index:3;
  bottom:30px; left:29px; right:29px;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  text-align:left;
  gap:7px;
}
.masonry-item .item-description h2,
.masonry-item .item-description .item-filter{
  opacity:1 !important;
  transform:none !important;
  margin:0;
}
.masonry-item .item-description h2{
  font-size:22px;
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:.012em;
}
.masonry-item .item-description h2 a{ color:var(--jl-fg); }
.masonry-item .item-filter{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--jl-fg-3);
  transition:color .3s;
}
.masonry-item:hover .item-filter{ color:var(--jl-gold); }

/* ============ 5. PIE ============ */
.copyright .social-widget-inner{ text-align:center; }

/* ==========================================================
   PAGINA DE CONTACTO — textos en dorado, a juego con el resto
   ========================================================== */
.page-id-1444 h1,
.page-id-1444 h2{
  color:var(--jl-fg) !important;
}
.page-id-1444 form label,
.page-id-1444 .wpforms-field-label,
.page-id-1444 form legend{
  font-family:"Barlow Condensed",sans-serif !important;
  font-size:13px !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  color:var(--jl-gold) !important;
}
.page-id-1444 .wpforms-field-sublabel,
.page-id-1444 form .description{
  color:rgba(201,162,39,.65) !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px !important;
}
.page-id-1444 input::placeholder,
.page-id-1444 textarea::placeholder{
  color:rgba(201,162,39,.45) !important;
}