/* =========================================================
   main.css — Hello Elementor Bureba
   Portfolio DOP · grid, modal, theme switcher, cursor
   Todas las clases con prefijo jbb- para evitar conflictos.
   ========================================================= */

/* ---------- FUENTES ---------- */
@font-face {
  font-family: 'Raleway JBB';
  src: url('../fonts/Raleway-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat JBB';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ---------- VARIABLES DE TEMA ---------- */
:root {
  --jbb-font-display: 'Raleway JBB', sans-serif;
  --jbb-font-ui: 'Montserrat JBB', sans-serif;
  /* Colores por defecto = LIGHT (red de seguridad si faltara data-theme) */
  --jbb-bg: #ffffff;
  --jbb-bg-soft: #f5f5f3;
  --jbb-border: #e0dedd;
  --jbb-text: #2a2826;
  --jbb-text-soft: #9a9896;
  --jbb-text-strong: #111110;
  --jbb-logo-invert: 0;
}
html[data-theme="light"] {
  --jbb-bg: #ffffff;
  --jbb-bg-soft: #f5f5f3;
  --jbb-border: #e0dedd;
  --jbb-text: #2a2826;
  --jbb-text-soft: #9a9896;
  --jbb-text-strong: #111110;
  --jbb-logo-invert: 0;
}
html[data-theme="dark"] {
  --jbb-bg: #0e0e0d;
  --jbb-bg-soft: #1a1a18;
  --jbb-border: #2a2826;
  --jbb-text: #c8c6c4;
  --jbb-text-soft: #6a6866;
  --jbb-text-strong: #f4f4f2;
  --jbb-logo-invert: 1;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --jbb-bg: #0e0e0d;
    --jbb-bg-soft: #1a1a18;
    --jbb-border: #2a2826;
    --jbb-text: #c8c6c4;
    --jbb-text-soft: #6a6866;
    --jbb-text-strong: #f4f4f2;
    --jbb-logo-invert: 1;
  }
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --jbb-bg: #ffffff;
    --jbb-bg-soft: #f5f5f3;
    --jbb-border: #e0dedd;
    --jbb-text: #2a2826;
    --jbb-text-soft: #9a9896;
    --jbb-text-strong: #111110;
    --jbb-logo-invert: 0;
  }
}

/* Aplicar fondo y color de tema al body de WordPress */
body {
  background: var(--jbb-bg);
  color: var(--jbb-text);
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---------- CURSOR (solo en dispositivos con ratón) ---------- */
@media (pointer: fine) {
  body.jbb-has-cursor { cursor: none; }
  body.jbb-has-cursor a,
  body.jbb-has-cursor button,
  body.jbb-has-cursor .jbb-grid-item,
  body.jbb-has-cursor .jbb-modal-still { cursor: none; }
  /* Inputs y textareas mantienen cursor normal */
  body.jbb-has-cursor input,
  body.jbb-has-cursor textarea,
  body.jbb-has-cursor select { cursor: auto; }
}
.jbb-cursor {
  width: 7px; height: 7px;
  background: var(--jbb-text-strong);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 1000001;
  transform: translate(-50%,-50%);
  transition: background 0.3s;
}
.jbb-cursor-ring {
  width: 30px; height: 30px;
  border: 1px solid var(--jbb-border);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 1000000;
  transform: translate(-50%,-50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s;
}

/* ---------- THEME SWITCHER (va en el header de Elementor) ---------- */
.jbb-theme-switcher {
  display: inline-flex;
  border: 1px solid var(--jbb-border);
  border-radius: 999px;
  padding: 2px;
  background: var(--jbb-bg);
  vertical-align: middle;
}
.jbb-theme-btn {
  background: none; border: none;
  width: 26px; height: 26px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--jbb-text-soft);
  transition: background 0.25s, color 0.25s;
  padding: 0;
}
.jbb-theme-btn:hover { color: var(--jbb-text-strong); }
.jbb-theme-btn.active { background: var(--jbb-bg-soft); color: var(--jbb-text-strong); }
.jbb-theme-btn svg { width: 13px; height: 13px; }

/* ---------- CONTENEDOR DE LA APP ---------- */
#jbb-work { width: 100%; }

/* ---------- INTRO DINÁMICO ---------- */
.jbb-intro {
  margin-bottom: 2rem; min-height: 20px;
  position: relative;
}
.jbb-intro-text {
  font-family: var(--jbb-font-ui); font-size: 0.6rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--jbb-text-soft);
  display: flex; align-items: center; gap: 0.9rem;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.jbb-intro-text::before {
  content: ''; display: block; flex: none;
  width: 1.5rem; height: 1px; background: var(--jbb-border);
}
.jbb-intro-text.out { opacity: 0; transform: translateY(-8px); }
.jbb-intro-text.in-init { opacity: 0; transform: translateY(8px); }

/* ---------- FILTROS ---------- */
.jbb-filters {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid var(--jbb-border);
  margin-bottom: 2rem;
}
#jbb-work .jbb-filter-btn {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px;
  box-shadow: none !important;
  font-family: var(--jbb-font-ui); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jbb-text-soft);
  padding: 0.65rem 1.2rem 0.75rem;
  transition: color 0.2s, border-color 0.2s;
}
#jbb-work .jbb-filter-btn.active {
  background: none !important;
  color: var(--jbb-text-strong) !important;
  border-bottom: 1px solid var(--jbb-text-strong) !important;
}
#jbb-work .jbb-filter-btn:hover { color: var(--jbb-text-strong) !important; }

/* ---------- GRID 16:9 ---------- */
.jbb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.jbb-grid-item {
  position: relative; overflow: hidden;
  background: var(--jbb-bg-soft);
  aspect-ratio: 16/9;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.jbb-grid-item.visible { opacity: 1; transform: translateY(0); }
.jbb-grid-item > img.jbb-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.85);
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s;
}
.jbb-grid-item:hover > img.jbb-thumb { transform: scale(1.04); filter: saturate(1); }
.jbb-thumb-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  filter: saturate(0.85);
  z-index: 1;
}
.jbb-grid-item:hover .jbb-thumb-preview.loaded { opacity: 1; }
.jbb-grid-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(17,17,16,0.85) 0%, rgba(17,17,16,0.15) 45%, transparent 100%);
  opacity: 0; transition: opacity 0.35s;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.2rem 1.1rem;
}
.jbb-grid-item:hover .jbb-grid-overlay { opacity: 1; }
.jbb-overlay-cat {
  font-family: var(--jbb-font-ui); font-size: 0.52rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 0.3rem;
}
.jbb-overlay-title {
  font-family: var(--jbb-font-display); font-weight: 300;
  font-size: 0.95rem; color: #fff; line-height: 1.2;
  margin-bottom: 0.25rem; letter-spacing: 0.01em;
}
.jbb-overlay-sub {
  font-family: var(--jbb-font-ui); font-size: 0.6rem;
  color: rgba(255,255,255,0.8); letter-spacing: 0.04em;
}
.jbb-play-icon {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%,-50%) scale(0.8);
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
}
.jbb-grid-item:hover .jbb-play-icon { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.jbb-play-icon svg { margin-left: 2px; }

/* ---------- MODAL ---------- */
.jbb-modal {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(17,17,16,0.92);
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s;
  overflow-y: auto; padding: 2rem 1rem;
}
.jbb-modal.open { opacity: 1; pointer-events: all; }
.jbb-modal-inner {
  width: 100%; max-width: 1100px;
  background: var(--jbb-bg);
  margin: auto; position: relative;
  transform: translateY(20px);
  transition: transform 0.4s ease 0.1s;
}
.jbb-modal.open .jbb-modal-inner { transform: translateY(0); }
.jbb-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--jbb-border);
}
.jbb-modal-nav-left { display: flex; align-items: center; gap: 0.4rem; }
.jbb-modal-nav-btn {
  background: none !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  font-family: var(--jbb-font-ui); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jbb-text-soft);
  padding: 0.4rem 0.7rem;
  display: flex; align-items: center; gap: 0.4rem;
  transition: color 0.2s;
}
.jbb-modal-nav-btn:hover { background: none !important; color: var(--jbb-text-strong) !important; }
.jbb-modal-nav-btn svg { width: 11px; height: 11px; }
.jbb-modal-nav-sep { width: 1px; height: 12px; background: var(--jbb-border); }

/* Estado de foco: tras pulsar, el texto NO debe volverse blanco/invisible */
.jbb-modal-nav-btn:focus,
.jbb-modal-nav-btn:active,
.jbb-modal-action-btn:focus,
.jbb-modal-action-btn:active {
  color: var(--jbb-text-strong) !important;
  background: none !important;
  outline: none !important;
}
#jbb-work .jbb-loadmore-btn:focus,
#jbb-work .jbb-loadmore-btn:active {
  color: var(--jbb-text-soft) !important;
  background: none !important;
  outline: none !important;
}
#jbb-work .jbb-filter-btn:focus {
  color: var(--jbb-text-soft) !important;
  background: none !important;
  outline: none !important;
}
#jbb-work .jbb-filter-btn.active:focus { color: var(--jbb-text-strong) !important; }
.jbb-modal-actions { display: flex; align-items: center; gap: 1.2rem; }
.jbb-modal-action-btn {
  background: none !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  font-family: var(--jbb-font-ui); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jbb-text-soft);
  display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none; transition: color 0.2s;
}
.jbb-modal-action-btn:hover { background: none !important; color: var(--jbb-text-strong) !important; }
.jbb-modal-action-btn svg { width: 13px; height: 13px; }
.jbb-modal-action-btn.hidden { display: none; }
.jbb-modal-video { aspect-ratio: 16/9; background: #000; width: 100%; }
.jbb-modal-video iframe { width: 100%; height: 100%; border: none; display: block; }
.jbb-modal-body { padding: 1.4rem 2rem 2.2rem; }
.jbb-modal-title {
  font-family: var(--jbb-font-display); font-weight: 300;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  color: var(--jbb-text-strong);
  line-height: 1.15; letter-spacing: 0.005em; margin-bottom: 0.4rem;
}
.jbb-modal-meta {
  font-family: var(--jbb-font-ui); font-size: 0.58rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--jbb-text-soft); margin-bottom: 1.8rem;
}
.jbb-credits {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem 3rem; padding: 1.4rem 0;
  border-top: 0.5px solid var(--jbb-border);
  border-bottom: 0.5px solid var(--jbb-border);
  margin-bottom: 2rem;
}
.jbb-credit-label {
  font-family: var(--jbb-font-ui); font-size: 0.55rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--jbb-text-soft); margin-bottom: 0.3rem;
}
.jbb-credit-value {
  font-family: var(--jbb-font-display); font-weight: 300;
  font-size: 1rem; color: var(--jbb-text-strong); letter-spacing: 0.01em;
}
.jbb-stills-label {
  font-family: var(--jbb-font-ui); font-size: 0.55rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--jbb-text-soft); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.jbb-stills-label::before { content: ''; display: block; width: 1.2rem; height: 1px; background: var(--jbb-border); }
.jbb-modal-stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jbb-modal-still { aspect-ratio: 3/2; background: var(--jbb-bg-soft); overflow: hidden; }
.jbb-modal-still img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.jbb-modal-still:hover img { transform: scale(1.04); }

/* ---------- LIGHTBOX DE STILLS ---------- */
.jbb-image-lightbox {
  position: fixed; inset: 0; z-index: 100001;
  background: rgba(0,0,0,0.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s; padding: 2rem;
}
.jbb-image-lightbox.open { opacity: 1; pointer-events: all; }
.jbb-image-lightbox img { max-width: 92%; max-height: 88%; object-fit: contain; }
.jbb-img-lb-header {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 1.5rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
}
.jbb-img-lb-counter { font-family: var(--jbb-font-ui); font-size: 0.6rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.5); }
.jbb-img-lb-counter strong { color: #fff; font-weight: 400; }
.jbb-img-lb-close {
  background: none !important; border: none !important;
  box-shadow: none !important;
  font-family: var(--jbb-font-ui); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); transition: color 0.2s;
}
.jbb-img-lb-close:hover { color: #fff; background: none !important; }
.jbb-img-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none !important; box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.2);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: border-color 0.2s, color 0.2s;
}
.jbb-img-lb-nav:hover { border-color: rgba(255,255,255,0.7); color: #fff; background: none !important; }
.jbb-img-lb-nav svg { width: 14px; height: 14px; }
.jbb-img-lb-prev { left: 2rem; }
.jbb-img-lb-next { right: 2rem; }

/* ---------- HEADER (cabecera Elementor) ---------- */
/* Línea separadora fina bajo la cabecera */
.jbb-header {
  border-bottom: 1px solid var(--jbb-border);
}

/* Menú de navegación — fuente y estilo del sitio */
.jbb-nav a.elementor-item,
.jbb-nav .elementor-nav-menu a,
.jbb-nav .elementor-nav-menu--main a {
  font-family: var(--jbb-font-ui) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--jbb-text-soft) !important;
  fill: var(--jbb-text-soft) !important;
  transition: color 0.2s !important;
}
.jbb-nav a.elementor-item:hover,
.jbb-nav a.elementor-item.elementor-item-active,
.jbb-nav .elementor-nav-menu a:hover {
  color: var(--jbb-text-strong) !important;
}

/* Iconos sociales — sin fondo, color del sitio */
.jbb-social .elementor-social-icon {
  background-color: transparent !important;
  color: var(--jbb-text-soft) !important;
  transition: color 0.2s !important;
  padding: 0 !important;
}
.jbb-social .elementor-social-icon:hover { color: var(--jbb-text-strong) !important; }
.jbb-social .elementor-social-icon svg { fill: currentColor !important; }

/* ---------- MENÚ DE REDES (texto: Instagram · Vimeo · IMDb · Models.com) ---------- */
/* Misma clase en header y footer */
.jbb-social-nav a.elementor-item,
.jbb-social-nav .elementor-nav-menu a {
  font-family: var(--jbb-font-ui) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--jbb-text-soft) !important;
  transition: color 0.2s !important;
}
.jbb-social-nav a.elementor-item:hover,
.jbb-social-nav .elementor-nav-menu a:hover {
  color: var(--jbb-text-strong) !important;
}

/* ---------- FOOTER (pie de página Elementor) ---------- */
/* Línea separadora fina sobre el footer */
.jbb-footer {
  border-top: 1px solid var(--jbb-border);
}
/* Textos del footer: pequeños y discretos */
.jbb-footer,
.jbb-footer p,
.jbb-footer .elementor-widget-text-editor,
.jbb-footer .elementor-heading-title {
  font-family: var(--jbb-font-ui) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.06em;
  color: var(--jbb-text-soft) !important;
}
/* Enlaces del footer (incluido el email) */
.jbb-footer a {
  color: var(--jbb-text-strong) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.jbb-footer a:hover { color: var(--jbb-text-soft) !important; }

/* ---------- BOTÓN "LOAD MORE" ---------- */
.jbb-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.jbb-loadmore-wrap[hidden] { display: none !important; }
#jbb-work .jbb-loadmore-btn {
  background: none !important;
  border: 1px solid var(--jbb-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--jbb-font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jbb-text-soft) !important;
  padding: 0.85rem 2.6rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
#jbb-work .jbb-loadmore-btn:hover {
  color: var(--jbb-text-strong) !important;
  border-color: var(--jbb-text-strong) !important;
  background: none !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .jbb-grid { grid-template-columns: repeat(2, 1fr); }
  .jbb-modal-body { padding: 1.2rem 1.2rem 1.8rem; }
  .jbb-credits { grid-template-columns: 1fr; gap: 1rem; }
  .jbb-modal-stills { grid-template-columns: repeat(2, 1fr); }
  .jbb-modal-actions { gap: 0.6rem; }
  .jbb-modal-action-btn, .jbb-modal-nav-btn { font-size: 0.55rem; }
  .jbb-img-lb-nav { width: 36px; height: 36px; }
  .jbb-img-lb-prev { left: 1rem; }
  .jbb-img-lb-next { right: 1rem; }
}
@media (max-width: 480px) {
  .jbb-grid { grid-template-columns: 1fr; }
}