/*
Theme Name: VAMPIRE26
Author: Tamara M ( FLIPF_LOPP )
Description: nebula93.com
Version: 1.0
Text Domain: Vampire
*/

@font-face {
    font-family: 'neue_haas_grotesk_text55roman';
    src: url('font/nhaasgrotesktxpro-55rg-webfont.woff2') format('woff2'),
         url('font/nhaasgrotesktxpro-55rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'neue_haas_grotesk_text_pr65Md';
    src: url('font/nhaasgrotesktxpro-65md-webfont.woff2') format('woff2'),
         url('font/nhaasgrotesktxpro-65md-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'neue_haas_grotesk_text_pr75Bd';
    src: url('font/nhaasgrotesktxpro-75bd-webfont.woff2') format('woff2'),
         url('font/nhaasgrotesktxpro-75bd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Reset CSS */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:none;font-size:100%;font:inherit;text-decoration:none;color:inherit;vertical-align:baseline;outline:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

* {
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
    -webkit-backface-visibility: hidden !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    overscroll-behavior-y: none; /* ✅ Solo bloquea scroll vertical (bounce) */
    overscroll-behavior-x: auto; /* ✅ Permite navegación horizontal */
}

::-moz-selection { background-color: transparent; }
::selection { background-color: transparent; }

.grecaptcha-badge { display: none !important; }

input, input:focus, input[type="submit"], textarea {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    overflow: hidden;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    box-shadow: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
    color: inherit;
    border: none;
}

input::first-line { vertical-align: middle; }
::-webkit-input-placeholder { color: #999999; opacity: 1; text-align: inherit; line-height: inherit; }
:-moz-placeholder { color: #999999; opacity: 1; text-align: inherit; line-height: inherit; }
::-moz-placeholder { color: #999999; opacity: 1; text-align: inherit; line-height: inherit; }
:-ms-input-placeholder { color: #999999; opacity: 1; text-align: inherit; line-height: inherit; }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }
textarea:focus::-webkit-input-placeholder { color: transparent; }
textarea:focus:-moz-placeholder { color: transparent; }
textarea:focus::-moz-placeholder { color: transparent; }
textarea:focus:-ms-input-placeholder { color: transparent; }

.searchsubmit {
    display: block;
    width: 25px;
    background: none;
    border: none;
}

input:focus-visible { outline: transparent; }

input[type="submit"] {
    background: black;
    color: white;
    font-size: 0.6em;
    justify-content: center;
    height: 1.5em;
    width: 6em;
    cursor: pointer;
    padding: 0.5em;
}

input[type="radio"] {
    cursor: pointer;
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    border: 1px solid;
    border-radius: 10px;
}

body {
    font-family: 'neue_haas_grotesk_text_pr65Md', sans-serif;
    line-height: 1.15;
    font-size: 0.6vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    width: calc(100% - 3em);
    margin: 1.5em;
}

::-webkit-scrollbar {
    display: none;
    width: 0;
}

header { height: 14em; }
main, .scrolleable { height: calc(100dvh - 14em - 4em - 2em);}
.listed-view .scrolleable { height: calc(100dvh - 14em - 4em - 4em);}
.scrolleable {overflow: auto;}

footer { text-align: center; margin-top: 3em; height: 1em; font-size: 0.8em;}

.category, .avcat { text-transform: uppercase; }
a { text-decoration: none; }
a:hover, .is-active { text-decoration: underline; }
.label { text-transform: uppercase; font-size: 0.7em; font-family: "Hubot Sans", sans-serif; }
header .label { margin-right: 1em; }
.list { list-style: none; margin: 0; padding: 0; }

/* Filtros */
.filters-bar { display: flex; flex-direction: column; gap: 3em; padding: 0 0 2.5em 0; }

.filters-row-top {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr 1.1fr 1fr 1.5fr 0.7fr;
}

.filters-row-bottom {
    display: grid;
    grid-template-columns: 0.46fr 0.65fr 0.7fr 1fr 1fr;
    gap: 1em;
    padding-top: 3.5em;
}

.logo img { width: 60%; }
.logo img:hover {filter: blur(1px);}

.archive-link { text-transform: uppercase; }
.pager { display: flex; gap: 1em; }
.pager .is-disabled { opacity: 0.4; pointer-events: none; }
.pager .is-active { text-decoration: underline; }

/* Tabla */
.thead {
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    padding: 0 !important;
}
.thead .proj { text-align: center; }
.thead .date, .td.td-date { text-align: right; }
.tcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding-top: 0.8em; }
.row-top { margin-bottom: 1em; }
.td-project { text-align: center; }
.archive-button { text-align: right; letter-spacing: 1px; }
.indent { text-indent: 2em; display: block; }
.disabled { opacity: 0; }

.pagination {
    margin-top: -1em;
}
.pagination a.active { font-family: 'neue_haas_grotesk_text_pr75Bd', sans-serif; }
.pagination-arrows {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
}
.pagination-numbers a { margin-right: 1em; }
.pagination-arrows a { margin-right: 1em; }

/* 3 columnas */
.rows-3col {
    display: block;
    column-count: 3;
    padding: 0.3em 0;
    gap: 3em;
}

.tr, .rows .tr a {
    display: grid;
    grid-template-columns: 0.5fr 1fr 2fr 2fr 0.5fr;
    align-items: center;
    break-inside: avoid;
    padding: 0.15em 0;
}

.rows .tr a * {
    pointer-events: none; /* Los spans internos NO capturan eventos */
}

.rows .tr a {
    pointer-events: auto; /* Pero el enlace SÍ */
}


.rows .tr { display: block; padding: 0; }

.td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}




.td.td-num { font-family: 'neue_haas_grotesk_text55roman', sans-serif; }
.fb a { margin-left: 1em; }
.filters-row-top .col { display: flex; }
.td-brand { text-transform: uppercase; }

/* Grid */
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 0.4em;
}

.films .grid-wrapper {
    grid-template-columns: repeat(4, 1fr);
}

.grid-container {
   width: 100%;
  aspect-ratio: 1 / 1; /* Esto fuerza que sea cuadrado */
  /*overflow: hidden;*/
}

/* Image Viewer / Lightbox */
.image-viewer {
    display: none;
    position: fixed;
    top: 14em;
    left: 0;
    width: calc(100dvw - 3em);
    height: calc(100dvh - 14em - 1em - 3em);
    min-height: 200px;
    background: white;
    z-index: 8;
    margin: 0 1.5em 0 1.5em;
}
.single .image-viewer {display: flex;}

.image-viewer-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.image-viewer-close, .image-viewer-back {
    position: absolute;
    cursor: pointer;
    letter-spacing: 1px;
    z-index: 8;
}
.image-viewer-close{display: none;}
.image-viewer-close:hover { text-decoration: underline;}
.lightboxing .image-viewer-close {display: block;}
.single.lightboxing .image-viewer-close { display: none; }

.image-viewer-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    min-height: 50vh; /*fix error slider thumbnails*/
}

.image-viewer-thumbnails {
    height: 10em;
    margin-top: 4em;
    overflow-x: auto;
    overflow-y: hidden;
}

.thumbnails-wrapper {
    display: flex;
    gap: 1em;
}
.single .thumbnails-wrapper {
  justify-content: center;
}

.thumbnail-item {
    width: 10em;
    height: 10em;
    cursor: pointer;
    opacity: 0.8;
    flex-shrink: 0;
}
.thumbnail-item:hover { opacity: 1; }
.thumbnail-item.active { opacity: 1; }
.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.open-lightbox {
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
}
.open-lightbox img,
.open-lightbox video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info del proyecto */
.row-info-viewer {
    position: absolute;
    left: 0;
    top: 3em;
}

.row-info.top{
  width: 5dvw;
}

.row-info.bottom{
  width: 10dvw;
  margin-top: 8dvh;
  overflow: auto;
  height: 40vh;
}

.row-info-viewer .info-container {
  margin-bottom: 1em;
}

.info-container a {
  text-decoration: underline;
}
    
.see-full {
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8dvh;
}
.underlined{
  border-bottom: 1px solid #000;
}

.single .image-viewer-info.archive { display: none; }
.home .image-viewer-info.single { display: none; }
.tr.screen {display: grid;}

#splash {
    width: 100dvw;
    height: 100dvh;
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: white;
}
#splash-btn{ cursor: pointer; width: 30%; }
#splash img{width: 100%;}
.veta {display: flex; align-items: center;}
.veta-sub { display: flex;}
.veta-sub li { margin-left: 1em;}
.veta-house-active .filters-row-bottom {
  grid-template-columns: 0.46fr 0.65fr 0.5fr 0.2fr 1fr 1fr;
}

/* ============ LIGHTBOX STYLES FROM JS ============ */

/* Thumbnail items */
.thumbnail-item {
  position: relative;
}

/* Slides container mobile */
.slides-container-mobile {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-out;
}

/* Individual slide items */
.slide-item {
  flex-shrink: 0;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Images in lightbox */
.slide-item img,
#viewer-current-image {
  max-width: 60dvw;
  max-height: 55dvh;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
}

/* Videos in lightbox */
.slide-item video,
#viewer-current-video {
  max-width: 55dvw;
  max-height: 55dvh;
  object-fit: cover;
}

/* Main viewer display */
#image-viewer {
  display: none;
}

#image-viewer.open {
  display: flex;
}

/* Main image and video - ocultos por defecto en lightbox desktop */
#viewer-current-image,
#viewer-current-video {
  cursor: pointer;
}

/* Mostrar mainImg cuando es image */
body.lightbox-image #viewer-current-image {
  display: block !important;
}

body.lightbox-image #viewer-current-video {
  display: none !important;
}

/* Mostrar mainVideo cuando es video */
body.lightbox-video #viewer-current-image {
  display: none !important;
}

body.lightbox-video #viewer-current-video {
  display: block !important;
}

/* En mobile, ambos ocultos (controla el slider) */
.image-viewer-main.mobile #viewer-current-image,
.image-viewer-main.mobile #viewer-current-video {
  display: none !important;
}

/* Image popup (HD view) */
#image-popup-hd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

#image-popup-hd img {
  max-width: 90dvw;
  max-height: 90dvh;
  object-fit: contain;
  user-select: none;
}

/* Body states when lightboxing */
body.lightboxing {
  overflow: hidden;
}

body.lightbox-open {
  overflow: hidden;
}

/* Loading indicators */
#loading-indicator-grid,
#loading-indicator-list {
  display: none;
}

#loading-indicator-grid.active,
#loading-indicator-list.active {
  display: block;
}






/* RESPONSIVE */
.screen { display: block; }
.mobile { display: none; }

@media (min-width: 2000px) {body {font-size: 0.4vw;}}
@media (min-width: 1700px) {
  body {font-size: 0.5vw;}
  .filters-row-top {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 1.2fr 0.8fr 0.8fr 1.5fr 0.7fr;
  }
  .filters-row-bottom {
    display: grid;
    grid-template-columns: 0.575fr 0.568fr 0.7fr 1fr 1fr;
    gap: 1em;
    padding-top: 3.5em;
  }
}

@media (max-width: 1200px) {
  .screen { display: none; }
  .mobile { display: block; }
  .tr.screen {display: none;}

  #splash-btn{ width: 60%; }

  header { height: 2.5em;}
  footer{margin-top: 1em;}
  body{font-size: 1vw; width: calc(100% - 2em); margin: 1em; line-height: 1.5;}
  main, .scrolleable { height: calc(100dvh - 2.5em - 2em - 2em);}
  .listed-view .scrolleable { height: calc(100dvh - 2.5em - 2em - 3em);}

  .image-viewer-content{overflow: auto; height: 100%;}

  .image-viewer-main img, .image-viewer-main video {
    max-width: 60dvw;
    max-height: none;
    object-fit: cover;
  }

  .menu-mobile {
    position: fixed;
    width: calc(100vw - 2em);
    height: calc(100dvh - 2.5em - 2em - 3.9em);
    background: white;
    top: 3.5em;
    left: 0;
    padding: 1em;
    z-index: 9;
    overflow: auto;
  }

  .mobile-menu-items{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1em;
  }
  .fb.visu {margin-top: 1em;  grid-template-columns: 1fr; margin-bottom: 1em;}
  .fb.order, .fb.visu {text-transform: uppercase;}
  .fb.order{ display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      margin-bottom: 2em;
  }
  
  .fb.visu{ display: grid; grid-template-columns: 2fr 1fr 1fr;}

  /*.rows .tr {padding-top: 1em;}*/
  .mobile-menu-items .list li {margin-bottom: 1em;}
  .mobile-menu-items .col.post {margin-top: 2em;}

  .mobile-full-shop{
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-transform: uppercase;
    margin-bottom: 8em;
  }

  .grid-wrapper {grid-template-columns: repeat(6, 1fr);}

  .fb a{ margin-left: 0;}
  header .label { margin-bottom: 1em;}

  .mobile-button {
    z-index: 9;
    position: fixed;
    right: 1em;
    top: 0.8em;
    height: 2em;
  }

  .mobile-button svg {
    width: 2.5em;
    height: 2.5em;
  }

  .logo {
    position: fixed;
    z-index: 9;
    width: 24em;
    left: 1em;
    top: 1em;
  }
  .menu-mobile{display: none;}
  .menu-open .menu-mobile {display: block;}
  .rows-3col {column-count: 1;}

  .archive-button {text-align: left;}

  .image-viewer {
    top: 0;
      width: calc(100dvw - 2em);
      height: calc(100dvh - 2em);
      margin: 1em;
      z-index: 10;
  }
  .image-viewer-info {
    position: relative;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .row-info-viewer {position: relative; top: auto; display: flex; flex-direction: column;}
  .row-info-viewer .info-container {
    margin-bottom: 0;
    width: 100%;
  }

  .see-full {margin-top: 2em;
      display: flex;
      justify-content: space-between;
    }
  
  .span-flex-mobile {         
      display: grid;
      grid-auto-flow: row;
      grid-template-columns:0.2fr 0.8fr 1fr 0.2fr;
    }
  .info-container.last {text-align: right;}
  .row-info.top {
    display: flex;
    width: 100%;
  }
  .see-full.mobile {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 4em;
  }
  .row-info.bottom {
    width: 100%;
    margin-top: 0;
    height: auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    column-gap: 0.8rem;
  }
  .image-viewer-thumbnails {margin-top: 1em;}
  .thumbnail-item {
    height: 8em;
    width: 8em;
  }

  /* ============================================
  SOLUCIÓN SOLO CSS - Prioridad al scroll vertical
  ============================================ */

  .image-viewer {
      overflow-y: scroll !important; /* ✅ Forzar scroll vertical */
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch;
  }

  .image-viewer-content {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      pointer-events: auto; /* ✅ Asegurar que capture eventos */
  }

  .image-viewer-thumbnails {
      flex-shrink: 0;
      height: 8em;
      margin-top: 2em;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      
      /* ✅ CLAVE: Estas propiedades evitan el conflicto */
      overscroll-behavior: contain; /* No propaga el scroll al padre */
      touch-action: pan-x pinch-zoom; /* Solo scroll horizontal */
      scroll-behavior: auto;
      
      /* ✅ Aislar la capa de scroll */
      isolation: isolate;
      will-change: scroll-position;
  }

  .single .image-viewer-thumbnails{
    display: flex;
    justify-content: center;
  }

  .thumbnails-wrapper {
      display: flex;
      gap: 0.2em;
      width: max-content; /* ✅ Importante para que funcione el scroll horizontal */
      height: 100%;
  }

  /* ✅ Asegurar que todo lo demás no interfiera */
  .image-viewer-main,
  .row-info-viewer,
  .image-viewer-info {
      touch-action: auto; /* ✅ Permitir scroll vertical normal */
      pointer-events: auto;
      margin-top: 0;
  }
  .row-info-viewer.top .info-container { width: 100%;}

  /* ============================================
  FIX SWIPE MÓVIL - AÑADIDO
  ============================================ */

  /* CRÍTICO: .image-viewer-main debe ocupar el espacio disponible */
  .image-viewer-main {
      flex: 1 !important;
      overflow: hidden !important;
      position: relative;
      min-height: 400px;
  }
  
  /* Contenedor de slides móvil */
  .slides-container-mobile {
      display: flex;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 0.3s ease-out;
  }
  
  /* Cada slide debe ocupar TODO el ancho del viewport */
  .slide-item {
      flex-shrink: 0;
      width: 100vw !important;
      height: 100% !important;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  /* Las imágenes/videos no deben interferir con los eventos táctiles */
  .slide-item img,
  .slide-item video {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
  }
}

@media (max-width: 700px) {
  body{font-size: 2vw;}
  .grid-wrapper {
      grid-template-columns: repeat(3, 1fr);
  }
  .mobile-button svg {
      width: 2em;
      height: 2em;
  }
  .logo img{width: 50%;}

  /* ============================================
   CSS ADICIONAL PARA SWIPE EN MÓVIL
   Añade esto al FINAL de tu style.css
   ============================================ */

  /* Contenedor principal del slider móvil */
  .slides-container-mobile {
      display: flex;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 0.3s ease-out;
  }
  
  /* Cada slide individual */
  .slide-item {
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  /* Bloquear eventos en imágenes/videos para que no interfieran con swipe */
  .slide-item img,
  .slide-item video {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
  }
  
  /* El área principal debe tener overflow hidden para ocultar slides fuera de vista */
  .image-viewer-main {
      overflow: hidden !important;
      position: relative;
  }
}

@media (max-width: 500px) {
  /*body{font-size: 3vw;}*/
}