/* CSS */
:root {
  /* Escala de espaciado base */
  --gap-5: 5px;
  --gap-10: 10px;
  --gap-14: 14px;
  --gap-20: 20px;
  --gap-30: 20px;
    --gap-40: 20px;
  --gap-60: 40px;
  --gap-80: 60px;

  --container-padding: 20px;
  --container-width: 100%;
}

@media (min-width: 768px) {
  :root {
    --container-width: 760px;
  }
}

/* Escritorio Estándar (Laptop) */
@media (min-width: 1024px) {
  :root {
    --container-width: 980px;
    --gap-30: 30px;
    --gap-40: 40px;
    --gap-60: 60px;
    --gap-80: 80px;
  }
}

/* Escritorio XL */
@media (min-width: 1400px) {
  :root {
    --container-padding: 80px;
    --container-width: 1280px;
  }
}

@font-face {
    font-family: "Biotif";
    src: url("/assets/fonts/Biotif-Regular.woff2") format("woff2");
    font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Biotif";
    src: url("/assets/fonts/Biotif-Medium.woff2") format("woff2");
    font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* --- BASE RESET --- */
html {
  font-size: 16px; /* Establece la base para 1rem = 16px */
  -webkit-text-size-adjust: 100%;
}

/* --- RESET & BODY --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  line-height: 1.2;
  font-family: "Biotif", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header{
  max-height:80px;
}

footer{
  background-color:#000000;
  color:#ffffff;
  min-height:76px;
  display:flex;
  align-items: center;
}

footer a{ color:#ffffff; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-padding);
  padding-left: var(--container-padding);

  /* Asegura que el padding no sume ancho extra */
    box-sizing: border-box;
}

p{ line-height: 1.5; }

a{ text-decoration:none; }

/* --- DISPLAY --- */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.d-inline-flex { display: inline-flex !important; }

/* --- FLEX PROPERTIES --- */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-grow-1 { flex-grow: 1 !important; }

/* --- JUSTIFY CONTENT --- */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

/* --- ALIGN ITEMS --- */
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

/* --- WIDTHS --- */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }

/* --- GAPS (HUECOS) --- */
.gap-5 { gap: var(--gap-5) !important; }
.gap-10 { gap: var(--gap-10) !important; }
.gap-14 { gap: var(--gap-14) !important; }
.gap-20 { gap: var(--gap-20) !important; }
.gap-30 { gap: var(--gap-30) !important; }
.gap-40 { gap: var(--gap-40) !important; }
.gap-60 { gap: var(--gap-60) !important; }
.gap-80 { gap: var(--gap-80) !important; }

/* --- TIPOGRAFÍA (FONT SIZE EN REM) --- */
.fs-10 { font-size: 0.625rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-14 { font-size: 0.875rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-20 { font-size: 1rem !important; }
.fs-24 { font-size: 1.5rem !important; }
.fs-32 { font-size: 2rem !important; }
.fs-48 { font-size: 2rem !important; }

/* --- FONT WEIGHT --- */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-black { font-weight: 900 !important; }

/* Escala de espaciado vertical */
.py-xs {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-sm {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-md {
    padding-top: 30px;
    padding-bottom: 30px;
}

.py-lg {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-xl {
    padding-top: 20px;
    padding-bottom: 20px;
}
.mt-sm { margin-top: 20px; }


/* --- MISC --- */
.italic { font-style: italic !important; }
.uppercase { text-transform: uppercase !important; }

#masonry-wrapper {
    align-items: start;
}

@media (max-width: 1023px) {
    #masonry-wrapper {
        flex-direction: column;
    }
}

h3{ letter-spacing: 1.2px; }

hr{
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #D5D6D6;
  margin: 0;
  padding: 0;
}

.darkgray{ color: #68757D; }

/* BUTTONS */

.btn{
  box-sizing: border-box;
  /* Disposición automática */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 11px 20px;
  gap: 10px;
  background: #1B1D1D;
  border-radius: 12px;
  border:0px;
  color:#ffffff;
  font-size: 1rem;
  font-family:"Biotif";
  font-weight: 500;
  width:fit-content;
  cursor: pointer;
  -webkit-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}

.btn:hover{
  background-color: #000000;
}

.btn svg{ width:18px; height:18px; }

/* --- SELECT --- */
.custom-select {
  position: relative;
  display: flex;
  align-items: center;
}

.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 11px 50px 11px 20px;
  font-size: 0.875rem;
  border: 1px solid #D5D6D6;
  border-radius: 12px;
  background-color: white;
  cursor: pointer;
  outline: none;
  font-family:"Biotif";
  font-weight: 500;
}

.custom-select select:hover { border-color: #000000; }

.custom-select option {
    padding: 10px;
  background-color: white;
}

.icon-arrow {
  position: absolute;
  right: 12px;
    pointer-events: none;
  color: #666;
}

.gallery-logo img{
  width:100%;
  max-width:100px;
  max-height:60px;
  height:auto;
}

.item .item-img{
  width:100%;
  height:auto;
  max-height:320px;
  background-color: #FAFAFA;
  border:1px solid #F1F1F1;
  display:flex;
  flex-shrink: 0;
}

.item .item-img img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.layout-vertical .item .item-img{
  max-height:unset !important;
  max-width: unset !important;
  border:0px !important;
  background-color:transparent !important;
  width:100 !important;
  height: auto !important;
}

.item-headings{ padding-bottom:6px; }

.vertical-line{
  width:1px;
  align-self:stretch;
  background-color: #D5D6D6;
}

/* --- Media Queries --- */

/* Tablets en adelante */
@media (min-width: 768px) {
  .md\:d-flex { display: flex !important; }
  .md\:flex-row { flex-direction: row !important; }
  .md\:flex-column { flex-direction: column !important; }
  .md\:justify-content-between { justify-content: space-between !important; }
  .md\:w-auto { width: auto !important; }

  .item .item-img{
    width:240px;
    height:240px;
    max-width:240px;
    max-height:240px;
  }

  .btn{ font-size: 0.875rem; }
  .layout-vertical .btn{ font-size:1rem; }
  .btn svg{ width:15px; height:15px; }
  .layout-vertical .btn svg{ width:20px; height:20px; }
}

/* Escritorio Estándar (Laptop) */
@media (min-width: 1024px) {
  .gallery-logo img{
    width:100%;
    max-width:150px;
    max-height:100px;
    height:auto;
  }
  .lg\:d-flex { display: flex !important; }
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:gap-60 { gap: var(--gap-60) !important; }

    .py-lg {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .py-xl {
        padding-top: 60px;
        padding-bottom: 60px;
    }
  .fs-20 { font-size: 1.25rem !important; }
  .fs-48 { font-size: 3rem !important; }
  header{  max-height:128px; }
  .btn{ font-size: 1rem; }
  .layout-vertical .btn{ font-size:0.875rem; }
  .btn svg{ width:20px; height:20px; }
  .layout-vertical .btn svg{ width:15px; height:15px; }
  .custom-select select { font-size:1rem; }
  .item .item-img {
    width: 350px;
    height: 350px;
    max-width: 350px;
    max-height: 350px;
  }
}
/* Escritorio XL */
@media (min-width: 1400px) {
  .layout-vertical .btn{ font-size:1rem; }
  .layout-vertical .btn svg{ width:20px; height:20px; }
}