* {margin: 0;padding: 0;box-sizing: border-box;}
:root {
    --verde: #ceff55;
}
@font-face {
  font-family: 'angels-hairs-v1';
  src: url(font/AngelsHairs.ttf);
}
a {text-decoration: none;}
body {background: #fff;font-family: "Inter", sans-serif;}

/* Header */
header {position: relative;padding: 30px 0px 20px;background: #fff;}
.header-container {/* max-width: 1200px; */margin: 0 auto;display: flex;justify-content: space-between;align-items: center;gap: 100px;padding: 0 40px;}
.header-left {/* display: flex; */gap: 30px;align-items: center;/* position: absolute; */white-space: nowrap;/* left: 30px; */justify-content: space-between;}
.header-logo {font-family: "Inter", sans-serif;font-size: 13px;font-weight: 500;color: #808285;text-decoration: none;transition: color 0.3s;}
.header-logo.active {color: #000000;}
.header-page-name {font-family: "Inter", sans-serif;font-size: 13px;font-weight: 400;color: #000000;margin-right: 9em;}
.header-center {display: flex;gap: 4em;align-items: center;width: 100%;max-width: 1200px;justify-content: flex-end;}
.header-right {}
.header-dropdown {position: relative;z-index: 1;}
.header-dropdown > a {font-family: "Inter", sans-serif;font-size: 13px;color: #808285;cursor: pointer;transition: color 0.3s;}
.header-dropdown > a:hover {color: var(--verde);}
.dropdown-menu {display: none;position: absolute;top: 100%;left: 0;min-width: 200px;padding-top: 10px;}
.header-dropdown:hover .dropdown-menu {display: block;}
.dropdown-menu a {display: block;font-family: "Inter", sans-serif;font-size: 13px;color: #000;padding: 4px 0;transition: color 0.3s;}
.dropdown-menu a:hover {color: var(--verde);}
.header-contact {font-family: "Inter", sans-serif;font-size: 13px;color: #808285;transition: color 0.3s;}
.header-contact:hover {color: var(--verde);}
.header-contact.active {color: #000000;}

@media (max-width: 768px) {
    .header-container {align-items: center;display: flex;gap: 20px;padding: 0 20px;}
    .header-left {display: flex;/* white-space: nowrap; */}
    .header-center {width: 100%;display: flex;justify-content: flex-end;gap: 1em;}
    .header-right {}
    .header-page-name {margin-right:0em;}
}

.gallery-container {/* max-width: 1200px; */width: 100%;margin: 0 auto;padding: 40px 20px;padding: 40px 120px;}
.gallery-row {display: grid;grid-template-columns: repeat(20, 1fr);gap: 0px;align-items: start;}

/* Dynamic margin classes para 20 columnas */
.margin-top--1 { margin-top: calc((100vw - 40px) / 20 * -1); }
.margin-top--2 { margin-top: calc((100vw - 40px) / 20 * -2); }
.margin-top--3 { margin-top: calc((100vw - 40px) / 20 * -3); }
.margin-top--4 { margin-top: calc((100vw - 40px) / 20 * -4); }
.margin-top--5 { margin-top: calc((100vw - 40px) / 20 * -5); }
.margin-top--6 { margin-top: calc((100vw - 40px) / 20 * -6); }
.margin-top-1 { margin-top: calc((100vw - 40px) / 20 * 1); }
.margin-top-2 { margin-top: calc((100vw - 40px) / 20 * 2); }
.margin-top-3 { margin-top: calc((100vw - 40px) / 20 * 3); }
.margin-top-4 { margin-top: calc((100vw - 40px) / 20 * 4); }
.margin-top-5 { margin-top: calc((100vw - 40px) / 20 * 5); }
.margin-top-6 { margin-top: calc((100vw - 40px) / 20 * 6); }
.margin-top-7 { margin-top: calc((100vw - 40px) / 20 * 7); }
.margin-top-8 { margin-top: calc((100vw - 40px) / 20 * 8); }
.margin-top-9 { margin-top: calc((100vw - 40px) / 20 * 9); }
.margin-top-10 { margin-top: calc((100vw - 40px) / 20 * 10); }
.margin-top-11 { margin-top: calc((100vw - 40px) / 20 * 11); }
.margin-top-12 { margin-top: calc((100vw - 40px) / 20 * 12); }
.margin-top-13 { margin-top: calc((100vw - 40px) / 20 * 13); }
.margin-top-14 { margin-top: calc((100vw - 40px) / 20 * 14); }
.margin-top-15 { margin-top: calc((100vw - 40px) / 20 * 15); }
.margin-top-16 { margin-top: calc((100vw - 40px) / 20 * 16); }
.margin-top-17 { margin-top: calc((100vw - 40px) / 20 * 17); }
.margin-top-18 { margin-top: calc((100vw - 40px) / 20 * 18); }
.margin-top-19 { margin-top: calc((100vw - 40px) / 20 * 19); }
.margin-top-20 { margin-top: calc((100vw - 40px) / 20 * 20); }

.margin-bottom--1 { margin-bottom: calc((100vw - 40px) / 20 * -1); }
.margin-bottom--2 { margin-bottom: calc((100vw - 40px) / 20 * -2); }
.margin-bottom--3 { margin-bottom: calc((100vw - 40px) / 20 * -3); }
.margin-bottom--4 { margin-bottom: calc((100vw - 40px) / 20 * -4); }
.margin-bottom--5 { margin-bottom: calc((100vw - 40px) / 20 * -5); }
.margin-bottom--6 { margin-bottom: calc((100vw - 40px) / 20 * -6); }
.margin-bottom-1 { margin-bottom: calc((100vw - 40px) / 20 * 1); }
.margin-bottom-2 { margin-bottom: calc((100vw - 40px) / 20 * 2); }
.margin-bottom-3 { margin-bottom: calc((100vw - 40px) / 20 * 3); }
.margin-bottom-4 { margin-bottom: calc((100vw - 40px) / 20 * 4); }
.margin-bottom-5 { margin-bottom: calc((100vw - 40px) / 20 * 5); }
.margin-bottom-6 { margin-bottom: calc((100vw - 40px) / 20 * 6); }
.margin-bottom-7 { margin-bottom: calc((100vw - 40px) / 20 * 7); }
.margin-bottom-8 { margin-bottom: calc((100vw - 40px) / 20 * 8); }
.margin-bottom-9 { margin-bottom: calc((100vw - 40px) / 20 * 9); }
.margin-bottom-10 { margin-bottom: calc((100vw - 40px) / 20 * 10); }
.margin-bottom-11 { margin-bottom: calc((100vw - 40px) / 20 * 11); }
.margin-bottom-12 { margin-bottom: calc((100vw - 40px) / 20 * 12); }
.margin-bottom-13 { margin-bottom: calc((100vw - 40px) / 20 * 13); }
.margin-bottom-14 { margin-bottom: calc((100vw - 40px) / 20 * 14); }
.margin-bottom-15 { margin-bottom: calc((100vw - 40px) / 20 * 15); }
.margin-bottom-16 { margin-bottom: calc((100vw - 40px) / 20 * 16); }
.margin-bottom-17 { margin-bottom: calc((100vw - 40px) / 20 * 17); }
.margin-bottom-18 { margin-bottom: calc((100vw - 40px) / 20 * 18); }
.margin-bottom-19 { margin-bottom: calc((100vw - 40px) / 20 * 19); }
.margin-bottom-20 { margin-bottom: calc((100vw - 40px) / 20 * 20); }

@media (min-width: 1240px) {
    .margin-top--1 { margin-top: calc(1200px / 20 * -1); }
    .margin-top--2 { margin-top: calc(1200px / 20 * -2); }
    .margin-top--3 { margin-top: calc(1200px / 20 * -3); }
    .margin-top--4 { margin-top: calc(1200px / 20 * -4); }
    .margin-top--5 { margin-top: calc(1200px / 20 * -5); }
    .margin-top--6 { margin-top: calc(1200px / 20 * -6); }
    .margin-top-1 { margin-top: calc(1200px / 20 * 1); }
    .margin-top-2 { margin-top: calc(1200px / 20 * 2); }
    .margin-top-3 { margin-top: calc(1200px / 20 * 3); }
    .margin-top-4 { margin-top: calc(1200px / 20 * 4); }
    .margin-top-5 { margin-top: calc(1200px / 20 * 5); }
    .margin-top-6 { margin-top: calc(1200px / 20 * 6); }
    .margin-top-7 { margin-top: calc(1200px / 20 * 7); }
    .margin-top-8 { margin-top: calc(1200px / 20 * 8); }
    .margin-top-9 { margin-top: calc(1200px / 20 * 9); }
    .margin-top-10 { margin-top: calc(1200px / 20 * 10); }
    .margin-top-11 { margin-top: calc(1200px / 20 * 11); }
    .margin-top-12 { margin-top: calc(1200px / 20 * 12); }
    .margin-top-13 { margin-top: calc(1200px / 20 * 13); }
    .margin-top-14 { margin-top: calc(1200px / 20 * 14); }
    .margin-top-15 { margin-top: calc(1200px / 20 * 15); }
    .margin-top-16 { margin-top: calc(1200px / 20 * 16); }
    .margin-top-17 { margin-top: calc(1200px / 20 * 17); }
    .margin-top-18 { margin-top: calc(1200px / 20 * 18); }
    .margin-top-19 { margin-top: calc(1200px / 20 * 19); }
    .margin-top-20 { margin-top: calc(1200px / 20 * 20); }
    
    .margin-bottom--1 { margin-bottom: calc(1200px / 20 * -1); }
    .margin-bottom--2 { margin-bottom: calc(1200px / 20 * -2); }
    .margin-bottom--3 { margin-bottom: calc(1200px / 20 * -3); }
    .margin-bottom--4 { margin-bottom: calc(1200px / 20 * -4); }
    .margin-bottom--5 { margin-bottom: calc(1200px / 20 * -5); }
    .margin-bottom--6 { margin-bottom: calc(1200px / 20 * -6); }
    .margin-bottom-1 { margin-bottom: calc(1200px / 20 * 1); }
    .margin-bottom-2 { margin-bottom: calc(1200px / 20 * 2); }
    .margin-bottom-3 { margin-bottom: calc(1200px / 20 * 3); }
    .margin-bottom-4 { margin-bottom: calc(1200px / 20 * 4); }
    .margin-bottom-5 { margin-bottom: calc(1200px / 20 * 5); }
    .margin-bottom-6 { margin-bottom: calc(1200px / 20 * 6); }
    .margin-bottom-7 { margin-bottom: calc(1200px / 20 * 7); }
    .margin-bottom-8 { margin-bottom: calc(1200px / 20 * 8); }
    .margin-bottom-9 { margin-bottom: calc(1200px / 20 * 9); }
    .margin-bottom-10 { margin-bottom: calc(1200px / 20 * 10); }
    .margin-bottom-11 { margin-bottom: calc(1200px / 20 * 11); }
    .margin-bottom-12 { margin-bottom: calc(1200px / 20 * 12); }
    .margin-bottom-13 { margin-bottom: calc(1200px / 20 * 13); }
    .margin-bottom-14 { margin-bottom: calc(1200px / 20 * 14); }
    .margin-bottom-15 { margin-bottom: calc(1200px / 20 * 15); }
    .margin-bottom-16 { margin-bottom: calc(1200px / 20 * 16); }
    .margin-bottom-17 { margin-bottom: calc(1200px / 20 * 17); }
    .margin-bottom-18 { margin-bottom: calc(1200px / 20 * 18); }
    .margin-bottom-19 { margin-bottom: calc(1200px / 20 * 19); }
    .margin-bottom-20 { margin-bottom: calc(1200px / 20 * 20); }
}

.gallery-image {width: 100%;height: auto;object-fit: contain;display: block;}
.image-wrapper {position: relative;overflow: hidden;display: block;}
.image-wrapper.has-link {cursor: pointer;}
body.page-home .image-wrapper:not(.has-hover) {background-color:#000;}
body.page-home .image-wrapper:not(.has-hover):hover img {opacity: 0.9;transition:0.1s;}

/* Hover effect para imágenes con hover_text */
.image-wrapper.has-hover .hover-text {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;display: flex;align-items: flex-start;justify-content: center;font-family: 'angels-hairs-v1', sans-serif;font-size: 150px;/* border: 1px solid #e6e7e8; */color: #333;line-height: 1.5;padding: 20px;text-align: center;transition: opacity 0.3s ease;z-index: 2;color: var(--verde);align-content: center;}
.image-wrapper.has-hover:hover .hover-text {opacity: 0;}
.image-wrapper.has-hover .gallery-image {opacity: 0;transition: opacity 0.3s ease;}
.image-wrapper.has-hover:hover .gallery-image {opacity: 1;}

/* Hover para links sin hover_text (solo en home) */
.image-wrapper.has-link:not(.has-hover) .link-title {position: absolute;inset: 0;display: flex;/* left: 50%; *//* bottom: 20%; */font-family: 'angels-hairs-v1', sans-serif;font-size: 120px;color: var(--verde);opacity: 0;transition: opacity 0.3s ease;z-index: 3;pointer-events: none;align-items: center;justify-content: center;}
.image-wrapper.has-link:not(.has-hover):hover .link-title {opacity: 1;}

/* Textos */
.text-wrapper {position: relative;overflow: hidden;/* background: #f5f5f5; */padding: 30px 0;display: flex;align-items: center;justify-content: flex-start;}
.text-content {font-family: "Inter", sans-serif;font-size: 16px;line-height: 1.6;color: #333;text-align: left;}
.image-caption {color: #333;padding: 10px 0;font-size: 13px;text-align: right;}
.image-wrapper:not(.has-hover):hover .gallery-image {/* transform: scale(1.02); */}
.gallery-image {transition: transform 0.3s ease;}

/* nav buttons */
#nav-buttons {margin: 60px auto 100px;display: none;}
#nav-button-prev,
#nav-button-next {position: fixed;top: 50%;transform: translateY(-50%);width: 100px;text-align: center;font-size: 100px;/* color: black; */font-family:'angels-hairs-v1', sans-serif;color: transparent; /* Makes the text fill transparent */-webkit-text-stroke: 1px #444;/* color: #e8ff0b; */}
#nav-button-prev:hover,
#nav-button-next:hover {color:var(--verde);-webkit-text-stroke: 0;}
body.page-home #nav-button-prev,
body.page-home #nav-button-next {display: none;}

#nav-button-prev {left: 30px;}
#nav-button-next {right: 30px;}
#nav-buttons-container {max-width: 1200px;margin:0 auto;display: flex;justify-content: space-around;}
#nav-buttons-container a {font-size: 140px;/* color: black; */font-family: 'angels-hairs-v1', sans-serif;color: transparent; /* Makes the text fill transparent */-webkit-text-stroke: 1px #444;/* color: #e8ff0b; */}
#nav-buttons-container a:focus {color:var(--verde);}

/* Footer */
.footer-container {/* max-width: 1200px; */margin: 60px auto 20px;padding: 0 40px;display: flex;justify-content: space-between;text-align: left;position: relative;}
.footer-email {font-family: "Inter", sans-serif;font-size: 15px;color: #939598;text-align: center;}
.footer-email a {color:inherit;}
.footer-scroll-top {/* position: absolute; *//* right: 20px; *//* bottom: 0px; */cursor: pointer;transition: opacity 0.3s;}
.footer-scroll-top:hover {opacity: 0.7;}
.footer-scroll-top img {display: block;height: 20px;padding: 0px 5px;}

img[src="up.svg"] {width: 30px;}

/* Lightbox */
#lightbox {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.95);z-index: 9999;cursor: zoom-out;}
#lightbox img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 90%;max-height: 90vh;object-fit: contain;cursor: default;}
.lightbox-close {position: absolute;top: 30px;right: 40px;font-size: 40px;color: var(--verde);cursor: pointer;transition: color 0.3s;}
.lightbox-close:hover {color: #000;}
.image-wrapper:not(.has-link) {cursor: zoom-in;}

@media (max-width: 768px) {
    .gallery-container {/* padding: 40px 60px; */padding: 40px 0px;}
    .image-wrapper.has-hover .hover-text {font-size: 100px;line-height: 0.7;padding: 0;}
    body.page-home #nav-buttons {display:none;}
    #nav-buttons {display: block;}
    #nav-buttons-container a {font-size: 70px;}
    #nav-button-prev,
    #nav-button-next {font-size: 90px;width:50px;}
    #nav-button-prev {/* left:20px; */display: none;}
    #nav-button-next {/* right:20px; */display: none;}
    .footer-container {gap: 20px;padding: 0 20px;display: flex;justify-content: space-between;margin-bottom: 20px;}
    .footer-scroll-top {position: relative;right: auto;}
    img[src="up.svg"] {width: 24px;}
    .footer-email {font-size: 14px;}
}

@media (max-width: 992px) {
    .header-center {padding:0 3em;}
}