/* assets/css/tufoto.css */
html, body {
  background: #0b0b0b; /* o el color que uses */
  color: #ffffff;
}
@supports (-webkit-touch-callout: none) {
  .tfg-blur, .modal-backdrop, .tu-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
}

.tfg-header {
   position:sticky; top:0; 
   z-index:10; 
   background:rgba(15,20,28,.92); 
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   border-bottom:1px solid rgba(255,255,255,.08); 
  }
.tfg-header-inner { display:flex; align-items:center; justify-content:center; position:relative; padding:10px 12px; }
.tfg-title { font-weight:700; letter-spacing:.2px; }
.tfg-logo { position:absolute; right:12px; top:50%; transform:translateY(-50%); }
.tfg-logo img { height:34px; width:auto; }

.tfg-main { padding:14px 12px 24px; }

.tfg-center { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.tfg-logo-big { max-width:180px; width:55vw; height:auto; opacity:.95; }
.tfg-ctabox { width:min(420px, 92vw); }

.tfg-grid-wrap { max-width:1200px; margin:0 auto; }
.tfg-card { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); cursor:pointer; }
.tfg-card img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 1 / 1; }

.tfg-pager { display:flex; align-items:center; justify-content:center; gap:10px; }
.tfg-pageinfo { min-width:90px; text-align:center; color:rgba(255,255,255,.75); }

.tfg-modal { background:#0b0f14; color:#e9eef5; }
.tfg-modal-body { display:flex; align-items:center; justify-content:center; padding:8px; }
.tfg-modal-img { max-width:100%; max-height:80vh; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45); }

.tfg-slideshow-overlay { position:fixed; inset:0; z-index:1000; background:#070a0f; display:flex; align-items:center; justify-content:center; }
.tfg-slideshow-img { max-width:100%; max-height:100%; object-fit:contain; }
.tfg-slideshow-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.85); font-size:.95rem; }

.tfg-logo-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.tfg-logo-btn img {
  height: 34px;
  width: auto;
  transition: transform .15s ease, opacity .15s ease;
}

.tfg-logo-btn:hover img {
  transform: scale(1.05);
  opacity: .9;
}

.tfg-logo-btn:active img {
  transform: scale(0.98);
}