/* =========================================================
   IMPROVEMENTS.CSS — Mejoras visuales sobre style.css
   ========================================================= */

/* Evitar scroll horizontal SIN romper position:fixed.
   IMPORTANTE: NO ponemos overflow-x en html (rompe el sticky en mobile).
   Solo en body y wrappers. */
body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
#wrapper, #content-wrapper {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Multimedia limitado al ancho del contenedor */
img, video, iframe, table {
  max-width: 100% !important;
  height: auto;
}
/* max-width: 100% en todos los descendientes (NO box-sizing porque rompe .item-info) */
.portfolio-grid *,
#thumbs * {
  max-width: 100% !important;
}
/* box-sizing border-box SOLO en los wrappers, NO en .item-info que tiene height fijo */
.portfolio-grid,
#thumbs,
#thumbs > li {
  box-sizing: border-box;
}
.item,
.item-info-overlay,
.flexslider {
  max-width: 100% !important;
  width: 100% !important;
}
.item {
  box-sizing: border-box;
}
/* .item-info en su altura original del CSS (sin border-box) */
.item-info {
  box-sizing: content-box !important;
  max-width: 100% !important;
}

/* Box-sizing border-box SOLO en el grid (NO global porque rompe .item-info
   que tiene height:17px + padding del CSS original) */
#thumbs,
#thumbs > li,
#thumbs > li .item,
.portfolio-grid {
  box-sizing: border-box;
}

/* ---------- HEADER COMPACTO AL SCROLL ---------- */
#header-wrapper {
  transition: padding 0.3s ease, height 0.3s ease;
  /* Sustituir opacity por background rgba: opacity hace TODO transparente
     (incluido el logo y se ve el contenido detrás como en mobile) */
  opacity: 1 !important;
  filter: none !important;
  background-color: #ffffff !important;
}
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}

/* Logo siempre centrado, sin line-height fantasma */
#logo,
#logo a {
  line-height: 0;
  display: inline-block;
  margin: 0;
  padding: 0;
}
#logo img {
  display: block;
  transition: max-height 0.3s ease;
  max-height: 50px;
  width: auto;
}

/* Back-top FLOTANTE en esquina inferior derecha, siempre visible (cuando hay scroll) */
#back-top {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0;
  z-index: 200 !important;
}
#back-top a {
  float: none !important;
  margin: 0 !important;
  display: block;
}

/* ---- ESTADO SCROLLED: header más compacto ---- */
#header-wrapper.scrolled {
  padding: 4px 0 !important;
  height: auto !important;
}
#header-wrapper.scrolled .header {
  min-height: 36px;
}
#header-wrapper.scrolled #logo img {
  max-height: 28px;
}

/* ---------- FILTROS CENTRADOS + FIJOS AL SCROLL (mismo line idiomas) ---------- */
.section-title {
  background-color: rgba(255, 255, 255, 0.97);
  margin: 0 0 30px 0 !important;
  padding: 5px 0 !important;
  overflow: visible !important;
  border-bottom: none !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 26px;
  transition: top 0.2s ease, padding 0.2s ease;
}

/* Spacer dinámico que reserva el espacio cuando los filtros pasan a fixed */
.section-title-spacer {
  display: block;
  height: 0;
  width: 100%;
}

/* Cuando estamos scrolleados → filtros fixed en la base del header.
   z-index alto para que NO los tape el overlay de los proyectos (z:99) */
body.filters-pinned .section-title {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 99;
  margin: 0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
body.filters-pinned.header-scrolled .section-title {
  top: 44px;
  padding: 3px 0 !important;
}

/* El overlay de cada proyecto: aparece al pasar por encima (desktop) o al
   tocar (móvil). Antes lo gestionaba Isotope, ahora lo hacemos con CSS puro.
   z-index 5 para no tapar el menú sticky (z:99). */
.item-info-overlay {
  z-index: 5 !important;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.item:hover .item-info-overlay,
.item:focus-within .item-info-overlay,
.item.touched .item-info-overlay {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
}

/* Eliminamos la línea extra encima de los proyectos */
.section-title + .content,
.section-title-spacer + .content {
  border-top: none !important;
  padding-top: 0 !important;
}

/* Filtros principales (Identity, Web, ...) */
.filterable {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  height: 18px;
}
.filterable ul {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.filterable ul li {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  padding-bottom: 0;
  line-height: 1;
  height: 18px;
}
.filterable li a {
  float: none !important;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 0;
  margin: 0 !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
  cursor: pointer;
}

/* Selector de idiomas — en la misma línea y mismo tamaño que las categorías */
.filterable2 {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  height: 18px;
}
.filterable2 ul {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.filterable2 ul li {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  padding-bottom: 0;
  line-height: 1;
  height: 18px;
}
.filterable2 li a {
  float: none !important;
  font-size: 12px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  padding: 0;
  margin: 0 !important;
  height: 18px;
}
.filterable2 li a img {
  display: block;
  height: 11px;
  width: auto;
  align-self: center;
}

/* Quitamos el separador vertical que pusimos antes */
.filterable + .filterable2::before {
  display: none !important;
  content: none !important;
}

/* ---- BARRITAS "/" entre items ---- */
.filterable li:before,
.filterable2 li:before {
  font-size: 12px !important;
  line-height: 1 !important;
  color: #ccc !important;
  display: inline-flex !important;
  align-items: center;
  margin: 0 8px;
  padding: 0;
}
.filterable ul li:last-child:before {
  content: "/" !important;
}
.filterable2 ul li:first-child:before {
  content: "" !important;
  margin: 0 !important;
  display: none !important;
}
.filterable2 ul li:last-child:before {
  content: "/" !important;
}

/* ============================================
   PORTFOLIO GRID — MASONRY con CSS columns
   Reemplaza el layout de Isotope (que apuntaba a #grid inexistente)
   ============================================ */
.portfolio-grid {
  width: 100% !important;
  max-width: 100%;
  margin: 0 auto !important;
  float: none !important;
  padding: 0 !important;
  display: block !important;
}
#thumbs {
  display: block !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  column-gap: 12px;
}
#thumbs > li {
  float: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  list-style: none;
  box-sizing: border-box;
  display: inline-block;
  width: 100% !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  position: static !important;
  left: auto !important;
  top: auto !important;
}
/* Por si Isotope sigue intentando posicionar */
#thumbs > li.isotope-item,
#thumbs > li.isotope-hidden {
  position: static !important;
}
#thumbs > li.is-hidden,
#thumbs > li.isotope-hidden {
  display: none !important;
}

/* Forzar que .item y su imagen NUNCA sobrepasen el ancho del li */
#thumbs > li .item {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
#thumbs > li .item img {
  width: 100% !important;
  height: auto !important;
  display: block;
  max-width: 100%;
}

/* Número de columnas según ancho de pantalla — masonry.
   Usamos solo min-width para evitar solapes de breakpoints. */
#thumbs { column-count: 1; }
@media (min-width: 521px)  { #thumbs { column-count: 2; } }
@media (min-width: 781px)  { #thumbs { column-count: 3; } }
@media (min-width: 1041px) { #thumbs { column-count: 4; } }
@media (min-width: 1561px) { #thumbs { column-count: 5; } }


/* Forzar que .item y su imagen NUNCA sobrepasen el ancho del li */
#thumbs > li .item {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
#thumbs > li .item img {
  width: 100% !important;
  height: auto !important;
  display: block;
  max-width: 100%;
}

/* ============================================
   MÓVIL — sobreescribimos lo que rompía el CSS original
   ============================================ */
@media (max-width: 767px) {
  /* CSS original ponía position:relative en mobile → forzamos fixed */
  #header-wrapper {
    position: fixed !important;
    overflow: visible !important;
    padding: 6px 0 !important;
  }
  #header-wrapper.scrolled {
    padding: 4px 0 !important;
  }
  .header {
    min-height: 38px;
  }
  #logo img {
    max-height: 30px;
  }
  #header-wrapper.scrolled #logo img {
    max-height: 22px;
  }

  /* Reservar espacio para el header fijo (que no tape el slider) */
  #content-wrapper {
    padding-top: 60px;
  }

  /* En móvil, items 100% ancho siempre, apilados */
  #thumbs > li {
    width: 100% !important;
    max-width: 100% !important;
  }
  #thumbs {
    padding: 0 5% !important;
    gap: 16px;
  }

  /* Slider a ancho COMPLETO en móvil (sin márgenes laterales) */
  #content-wrapper > .content:first-of-type {
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
  }
  .flexslider {
    margin: 0 !important;
  }
  /* Que las imágenes se adapten en ancho pero no rompamos los widths internos de FlexSlider */
  .flexslider .slides li img,
  .flexslider .slides li a img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Section-title flex wrap centrado */
  .section-title {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 6px 5% !important;
    margin-bottom: 8px !important;
    row-gap: 2px;
  }

  /* TRUCO CLAVE: display:contents hace que los <li> de .filterable y
     .filterable2 sean hijos DIRECTOS del .section-title flex container.
     Así se mezclan: ES/EN se ponen al final de la última fila de categorías
     (después de RETRATOS), no en una línea aparte */
  .filterable,
  .filterable ul,
  .filterable2,
  .filterable2 ul {
    display: contents !important;
  }
  /* Todos los li (categorías + idiomas) son flex items del section-title */
  .filterable ul li,
  .filterable2 ul li {
    display: inline-flex !important;
    align-items: center;
    height: 22px;
    padding: 0 !important;
  }
  /* MISMO tamaño en filtros e idiomas */
  .filterable li a,
  .filterable2 li a {
    font-size: 12px;
  }
  .filterable li:before,
  .filterable2 li:before {
    margin: 0 6px;
    font-size: 12px !important;
  }

  /* FORZAR 1 SOLA COLUMNA en móvil — nada de masonry, nada de cortar */
  #thumbs {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    padding: 0 5% !important;
  }
  #thumbs > li {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sticky filtros en móvil — DEBAJO del header compactado (no encima) */
  body.filters-pinned .section-title {
    top: 50px;
  }
  body.filters-pinned.header-scrolled .section-title {
    top: 38px;
    padding: 4px 5% !important;
  }

  /* Back-top también visible en móvil, abajo-derecha (anulamos la regla del CSS original que lo ocultaba) */
  #back-top {
    display: block !important;
    bottom: 15px !important;
    right: 15px !important;
  }
  #back-top a {
    display: block !important;
  }
}

/* Móvil pequeño */
@media (max-width: 479px) {
  .filterable li:before,
  .filterable2 li:before {
    margin: 0 4px;
  }
}