/* =============================================================

   FACREDIG · Galería institucional

   1. Variables y base

   2. Barra de navegación

   3. Portada y carrusel

   4. Filtros y galería

   5. Visor de imágenes

   6. Animaciones y responsive

   ============================================================== */



:root {

  --bg: #050a1b;

  --navy: #091a43;

  --blue: #1353f3;

  --cyan: #00e5ff;

  --text: #f6faff;

  --soft: #a8b9d9;

  --border: rgba(116,198,255,.19);

  --ease: cubic-bezier(.22,1,.36,1);

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  color: var(--text);

  background: var(--bg);

  font-family: Inter,"Segoe UI",Arial,sans-serif;

}



button,input {

  font: inherit;

}



button {

  cursor: pointer;

}



a {

  color: inherit;

  text-decoration: none;

}



img {

  display: block;

  width: 100%;

}



button:focus-visible,a:focus-visible,input:focus-visible {

  outline: 2px solid var(--cyan);

  outline-offset: 4px;

}



.page-glow {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background: radial-gradient(ellipse at 80% 5%,rgba(14,99,231,.19),transparent 45%),radial-gradient(ellipse at 0% 65%,rgba(0,216,255,.06),transparent 10%);

}



.top {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  z-index: 10;

}



.topbar {

  max-width: 1480px;

  margin: auto;

  padding: 22px clamp(20px,4vw,64px);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}



.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}



.brand-logo {

  width: 60px;

  height: 60px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: white;

  padding: 4px;

  box-shadow: 0 0 0 2px rgba(255,255,255,.19),0 0 25px rgba(0,229,255,.16);

  overflow: hidden;

  flex: none;

}



.brand-logo img {

  height: 100%;

  object-fit: contain;

}



.brand strong {

  font-size: 18px;

  letter-spacing: .11em;

}



.brand small {

  display: block;

  margin-top: 3px;

  font-size: 10px;

  letter-spacing: .16em;

  color: #a8dbe9;

}



.back {

  border: 1px solid rgba(255,255,255,.28);

  border-radius: 100px;

  padding: 12px 21px;

  background: rgba(3,15,39,.32);

  backdrop-filter: blur(10px);

  font-size: 13px;

  font-weight: 800;

  transition: .3s;

}



.back:hover {

  background: rgba(0,229,255,.16);

  border-color: var(--cyan);

}



.hero {

  position: relative;

  min-height: 720px;

  height: min(870px,93vh);

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  background: #07142f;

}



.hero-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 1s ease;

}



.hero-slide.active {

  opacity: 1;

}



.hero-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: brightness(1.05) saturate(1.08) contrast(1.03);

  animation: slowZoom 13s ease-in-out infinite alternate;

}



.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(1,5,20,.58) 0%,
      rgba(1,7,25,.32) 44%,
      rgba(2,8,24,.05) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,10,27,.35) 0%,
      transparent 42%,
      rgba(0,5,18,.10) 100%
    );
}



.hero-ring {

  position: absolute;

  z-index: 2;

  top: 5%;

  right: 4%;

  width: 38vw;

  aspect-ratio: 1;

  border-radius: 50%;

  border: 1px solid rgba(0,229,255,.1);

  box-shadow: 0 0 0 55px rgba(0,229,255,.023),0 0 0 110px rgba(0,229,255,.012);

  pointer-events: none;

}



.hero-content {

  position: relative;

  z-index: 3;

  width: min(1480px,100%);

  margin: 0 auto;

  padding: 170px clamp(20px,4vw,64px) 107px;

}



.overline {

  display: flex;

  align-items: center;

  gap: 11px;

  text-transform: uppercase;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .28em;

  color: #65f1ff;

}



.overline:before {

  content: "";

  width: 35px;

  height: 2px;

  background: var(--cyan);

  box-shadow: 0 0 18px var(--cyan);

}



h1 {

  margin: 24px 0 18px;

  max-width: 950px;

  font-size: clamp(58px,8.2vw,137px);

  line-height: .88;

  letter-spacing: -.065em;

  font-weight: 950;

  text-transform: uppercase;

}



h1 em {

  font-style: normal;

  background: linear-gradient(110deg,#fff 9%,#bce9ff 45%,#00dfff);

  background-clip: text;

  color: transparent;

}



h1 span {

  display: block;

}



.hero-desc {

  max-width: 540px;

  color: #d8e9ff;

  font-size: clamp(15px,1.5vw,18px);

  line-height: 1.65;

}



.hero-bottom {

  display: flex;

  align-items: center;

  gap: 24px;

  flex-wrap: wrap;

  margin-top: 29px;

}



.cta {

  display: inline-flex;

  align-items: center;

  gap: 22px;

  padding: 16px 21px;

  border-radius: 12px;

  background: var(--cyan);

  color: #011129;

  text-transform: uppercase;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .11em;

  box-shadow: 0 10px 36px rgba(0,229,255,.25);

  transition: transform .3s var(--ease),box-shadow .3s;

}



.cta:hover {

  transform: translateY(-4px);

  box-shadow: 0 13px 40px rgba(0,229,255,.45);

}



.hero-index {

  font-size: 12px;

  color: #b8cce5;

  font-weight: 700;

  letter-spacing: .14em;

}



.hero-index b {

  color: var(--cyan);

  font-size: 20px;

}



.hero-controls {

  position: absolute;

  z-index: 5;

  right: clamp(20px,4vw,64px);

  bottom: 110px;

  display: flex;

  gap: 10px;

}



.round {

  width: 47px;

  height: 47px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.28);

  background: rgba(7,20,47,.4);

  color: white;

  font-size: 21px;

  backdrop-filter: blur(8px);

}



.round:hover {

  background: #00dfff;

  color: #001126;

}



.ticker {

  overflow: hidden;

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

  background: #07142d;

}



.ticker-track {

  display: flex;

  gap: 35px;

  white-space: nowrap;

  padding: 19px 0;

  animation: marquee 34s linear infinite;

  color: #76dffc;

  font-size: 12px;

  letter-spacing: .24em;

  font-weight: 800;

}



.ticker-track i {

  font-style: normal;

  color: #fff;

}



.ticker-track span {

  flex: none;

}



.wrap {

  max-width: 1480px;

  margin: 0 auto;

  padding: 75px clamp(20px,4vw,64px) 110px;

}



.section-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 22px;

  flex-wrap: wrap;

  margin-bottom: 26px;

}



.kicker {

  font-size: 12px;

  letter-spacing: .22em;

  text-transform: uppercase;

  color: var(--cyan);

  font-weight: 800;

}



.section-title {

  font-size: clamp(34px,4.3vw,65px);

  line-height: 1.03;

  letter-spacing: -.055em;

  margin: 14px 0 6px;

}



.section-title span {

  color: #6b91ff;

}



.section-sub {

  max-width: 540px;

  color: var(--soft);

  line-height: 1.6;

  font-size: 15px;

  margin: 0;

}



.count {

  color: #b9cae4;

  font-size: 13px;

  font-weight: 700;

}



.count b {

  font-size: 24px;

  color: #fff;

}



.filters {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  flex-wrap: wrap;

  margin: 30px 0;

}



.pills {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.pill {

  padding: 12px 18px;

  color: #b9cae4;

  background: #0b1734;

  border: 1px solid rgba(150,205,255,.13);

  border-radius: 9px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .04em;

  transition: .25s;

}



.pill:hover,.pill.active {

  color: #001125;

  background: var(--cyan);

  border-color: var(--cyan);

  box-shadow: 0 0 20px rgba(0,229,255,.15);

}



.search {

  display: flex;

  gap: 9px;

  align-items: center;

  border: 1px solid var(--border);

  padding: 0 16px;

  border-radius: 10px;

  height: 45px;

  background: rgba(255,255,255,.035);

}



.search span {

  color: var(--cyan);

}



.search input {

  background: none;

  color: #fff;

  border: 0;

  outline: 0;

  min-width: 220px;

  max-width: 38vw;

}



.search input::placeholder {

  color: #8092b5;

}



.gallery {

  display: grid;

  grid-template-columns: repeat(4,minmax(0,1fr));

  grid-auto-rows: 158px;

  gap: 15px;

}



.tile {

  position: relative;

  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 15px;

  background: #102454;

  padding: 0;

  color: var(--text);

  text-align: left;

  grid-row: span 2;

  box-shadow: 0 12px 30px rgba(0,0,0,.18);

  transition: transform .3s var(--ease),border-color .3s;

}



.tile[data-shape=wide] {

  grid-column: span 2;

}



.tile[data-shape=tall] {

  grid-row: span 3;

}



.tile img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .7s var(--ease),filter .6s;

  filter: saturate(.98);

}



.tile:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg,rgba(0,5,23,.91),rgba(0,7,28,0) 63%);

  pointer-events: none;

}



.tile:hover {

  transform: translateY(-6px);

  border-color: rgba(0,229,255,.85);

}



.tile:hover img {

  transform: scale(1.085);

  filter: saturate(1.25);

}



.tile .num {

  position: absolute;

  top: 15px;

  left: 16px;

  z-index: 2;

  font-weight: 800;

  font-size: 12px;

  color: #fff9;

  letter-spacing: .13em;

}



.tile .expand {

  position: absolute;

  top: 15px;

  right: 16px;

  z-index: 2;

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border: 1px solid #fff7;

  border-radius: 50%;

  font-size: 18px;

  transition: .3s;

}



.tile:hover .expand {

  background: var(--cyan);

  color: #001125;

  border-color: var(--cyan);

}



.tile-info {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 2;

  padding: 25px 22px;

}



.tile-info small {

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .19em;

  text-transform: uppercase;

  color: #5aebff;

}



.tile-info strong {

  font-size: clamp(17px,1.55vw,25px);

  line-height: 1.15;

  display: block;

  margin-top: 8px;

  letter-spacing: -.025em;

}



.tile-info p {

  font-size: 12px;

  line-height: 1.4;

  color: #d4e3f6;

  margin: 8px 0 0;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: .3s;

}



.tile:hover .tile-info p {

  max-height: 55px;

  opacity: 1;

}



.tile.hidden {

  display: none;

}



.empty {

  padding: 35px;

  background: #0d1a37;

  border: 1px solid var(--border);

  border-radius: 14px;

  text-align: center;

  color: #b9cae4;

  display: none;

}



.empty.visible {

  display: block;

}



.end-note {

  margin-top: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 22px;

  padding: 26px 0;

  border-top: 1px solid var(--border);

  color: #a9bddd;

  flex-wrap: wrap;

}



.end-note strong {

  display: block;

  font-size: 19px;

  color: white;

  margin-bottom: 4px;

}



.footer {

  text-align: center;

  border-top: 1px solid var(--border);

  padding: 28px;

  color: #8da4cb;

  font-size: 12px;

  letter-spacing: .09em;

}



.lightbox {

  position: fixed;

  inset: 0;

  background: rgba(0,5,19,.94);

  backdrop-filter: blur(14px);

  z-index: 100;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 48px 70px;

}



.lightbox.open {

  display: flex;

}



.lb-image {

  max-width: 100%;

  max-height: 78vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 7px;

  box-shadow: 0 22px 70px #0009;

}



.lb-title {

  position: absolute;

  bottom: 18px;

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  min-width: 250px;

}



.lb-title strong {

  font-size: 17px;

  display: block;

}



.lb-title span {

  font-size: 12px;

  color: #9ddbe8;

}



.lb-close {

  position: absolute;

  top: 18px;

  right: 24px;

}



.lb-prev {

  position: absolute;

  left: 17px;

}



.lb-next {

  position: absolute;

  right: 17px;

}



@keyframes slowZoom {

  from {

    transform: scale(1);

  }



  to {

    transform: scale(1.07);

  }

}

@keyframes marquee {

  to {

    transform: translateX(-50%);

  }

}

@media (max-width:1000px) {

  .gallery {

    grid-template-columns: repeat(3,minmax(0,1fr));

    grid-auto-rows: 135px;

  }



  .hero {

    height: 760px;

  }



  .hero-controls {

    bottom: 55px;

  }

}

@media (max-width:720px) {

  .hero {

    min-height: 660px;

    height: 80svh;

  }



  .hero-content {

    padding-bottom: 102px;

  }



  .hero:after {
    background: linear-gradient(
      0deg,
      rgba(5,10,27,.45) 0%,
      rgba(1,7,25,.20) 70%,
      rgba(1,7,25,.12) 100%
    );
  }



  .hero-ring {

    display: none;

  }



  h1 {

    font-size: clamp(47px,12vw,82px);

  }



  .topbar {

    padding: 17px 20px;

  }



  .brand-logo {

    height: 48px;

    width: 48px;

  }



  .brand strong {

    font-size: 14px;

  }



  .brand small {

    font-size: 8px;

  }



  .back {

    font-size: 11px;

    padding: 11px 13px;

  }



  .hero-controls {

    right: 20px;

    bottom: 25px;

  }



  .wrap {

    padding-top: 55px;

  }



  .gallery {

    grid-template-columns: repeat(2,minmax(0,1fr));

    grid-auto-rows: 118px;

    gap: 10px;

  }



  .tile[data-shape=wide] {

    grid-column: span 2;

  }



  .tile[data-shape=tall] {

    grid-row: span 3;

  }



  .tile-info {

    padding: 15px;

  }



  .tile-info strong {

    font-size: 17px;

  }



  .search {

    flex: 1;

  }



  .search input {

    min-width: 0;

    max-width: none;

    width: 100%;

  }



  .filters {

    align-items: stretch;

  }



  .pills {

    width: 100%;

  }



  .lightbox {

    padding: 80px 15px;

  }



  .lb-prev,.lb-next {

    top: 50%;

    transform: translateY(-50%);

    background: #00152bba;

  }



  .lb-prev {

    left: 5px;

  }



  .lb-next {

    right: 5px;

  }



  .lb-title {

    bottom: 25px;

  }



  .tile .expand {

    height: 31px;

    width: 31px;

    font-size: 14px;

  }

}

@media (max-width:420px) {

  .gallery {

    grid-auto-rows: 110px;

  }



  .tile:not([data-shape=wide]) .tile-info strong {

    font-size: 15px;

  }



  .hero-desc {

    font-size: 14px;

  }



  .pill {

    padding: 10px 12px;

    font-size: 11px;

  }



  .tile-info p {

    display: none;

  }



  .hero-index {

    display: none;

  }

}

@media (prefers-reduced-motion:reduce) {

  *,*::before,*::after {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;

  }

}



/* ÁLBUMES: distintivo de cantidad y reproducción de videos */

.album-tile .album-count { position:absolute;z-index:3;top:15px;left:52px;padding:7px 11px;color:#fff;font-size:11px;font-weight:800;border-radius:999px;background:rgba(0,12,35,.66);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px) }

\#lbVideo.lb-image { display:none;max-width:100%;max-height:78vh;width:min(1100px,100%);height:auto;object-fit:contain;background:#000 }

.lightbox .round:disabled {opacity:.3;cursor:not-allowed}

@media(max-width:720px){.album-tile .album-count{top:12px;left:35px;padding:6px 8px;font-size:10px}}