/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    'Lato',
    sans-serif;

  color: #252525;

  background: #ffffff;

  -webkit-font-smoothing: antialiased;
}

body.lightbox-open {
  overflow: hidden;
}

img {
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}



/* =========================================================
   VARIABLES
========================================================= */

:root {

  --yellow: #F9B333;

  --green-light: #6eb749;
  --green: #48ad39;
  --green-dark: #086735;

  --purple: #362783;

  --text: #252525;
  --text-soft: #60707c;

  --surface: #ffffff;
  --surface-soft: #f5f8f3;

  --border: #e6ebe4;
}



/* =========================================================
   NAVBAR
========================================================= */

.navbar {
  position: sticky;

  top: 0;

  z-index: 1000;

  background: #ffffff;

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}


/* LÍNEA MULTICOLOR */

.navbar::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 0;
  right: 0;

  height: 4px;

  background:
    linear-gradient(
      to right,
      var(--yellow),
      var(--green-light),
      var(--green),
      var(--green-dark),
      var(--purple)
    );

  z-index: 1;

  pointer-events: none;
}


/* SCROLL */

.navbar.scrolled {
  background:
    rgba(255, 255, 255, 0.88);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  box-shadow:
    0 2px 28px
    rgba(54, 39, 131, 0.10);
}


/* CONTENEDOR */

.nav-container {
  max-width: 1200px;

  margin: 0 auto;

  padding:
    14px
    20px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;
}


/* LOGO */

.nav-logo img {
  display: block;

  height: 48px;

  width: auto;

  transition:
    transform 0.3s ease;
}

.nav-logo:hover img {
  transform:
    scale(1.04);
}


/* MENÚ */

.nav-menu {
  display: flex;

  align-items: center;

  gap: 30px;
}

.nav-links {
  display: flex;

  align-items: center;

  gap: 30px;
}

.nav-menu a {
  position: relative;

  text-decoration: none;

  font-family:
    'Lato',
    sans-serif;

  font-weight: 600;

  color: #333333;

  font-size: 17px;

  transition:
    color 0.25s ease;
}

.nav-menu a:hover {
  color:
    var(--green);
}


/* LINK ACTIVO */

.nav-links a.nav-active {
  color:
    var(--green);
}

.nav-links a.nav-active::after {
  content: "";

  position: absolute;

  bottom: -5px;
  left: 0;
  right: 0;

  height: 2px;

  background:
    var(--green);

  border-radius: 1px;

  animation:
    navSlideIn
    0.25s
    ease;
}

@keyframes navSlideIn {

  from {
    transform:
      scaleX(0);
  }

  to {
    transform:
      scaleX(1);
  }

}


/* CTA */

.nav-btn {
  display: inline-block;

  padding:
    12px
    22px;

  background:
    var(--yellow);

  color:
    #ffffff !important;

  border-radius:
    999px;

  text-decoration:
    none;

  white-space:
    nowrap;

  font-family:
    'Lato',
    sans-serif;

  font-weight:
    800 !important;

  font-size:
    14px;

  box-shadow:
    0 4px 14px
    rgba(249, 179, 51, 0.35);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.nav-btn:hover {
  transform:
    translateY(-2px)
    scale(1.04);

  box-shadow:
    0 8px 22px
    rgba(249, 179, 51, 0.45);
}


/* DROPDOWN */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;

  top: 100%;
  left: 0;

  min-width:
    220px;

  padding:
    10px
    0;

  background:
    #ffffff;

  border:
    1px solid
    rgba(54, 39, 131, 0.07);

  border-radius:
    14px;

  box-shadow:
    0 12px 32px
    rgba(54, 39, 131, 0.12);

  opacity: 0;

  pointer-events:
    none;

  transform:
    translateY(8px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;

  z-index:
    9999;
}

.dropdown::after {
  content: "";

  position: absolute;

  left: 0;
  top: 100%;

  width:
    240px;

  height:
    14px;
}

.dropdown-menu a {
  display: block;

  padding:
    10px
    18px;

  font-size:
    15px;

  color:
    #333333;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}

.dropdown-menu a:hover {
  background:
    rgba(72, 173, 57, 0.07);

  color:
    var(--green);

  padding-left:
    22px;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;

  pointer-events:
    auto;

  transform:
    translateY(0);
}


/* HAMBURGUESA */

.nav-toggle {
  display:
    none;

  flex-direction:
    column;

  gap:
    5px;

  cursor:
    pointer;

  z-index:
    1001;

  padding:
    4px;
}

.nav-toggle span {
  width:
    26px;

  height:
    3px;

  display:
    block;

  background:
    var(--green-dark);

  border-radius:
    2px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform:
    rotate(45deg)
    translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity:
    0;

  transform:
    scaleX(0);
}

.nav-toggle.active span:nth-child(3) {
  transform:
    rotate(-45deg)
    translate(6px, -6px);
}



/* =========================================================
   HERO GALERÍA
========================================================= */

.galeria-hero {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(110, 183, 73, 0.18),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 70%,
      rgba(249, 179, 51, 0.11),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      #f6f7f4 0%,
      #ffffff 56%,
      #edf6e8 100%
    );
}


.galeria-hero-container {
  position: relative;

  z-index: 3;

  max-width:
    1400px;

  min-height:
    620px;

  margin:
    0 auto;

  padding:
    70px
    40px
    125px;

  display:
    grid;

  grid-template-columns:
    0.92fr
    1.08fr;

  align-items:
    center;

  gap:
    60px;
}


/* ENGRANAJE */

.galeria-hero-gear {
  position:
    absolute;

  width:
    320px;

  left:
    -145px;

  bottom:
    30px;

  opacity:
    0.055;

  pointer-events:
    none;

  animation:
    galeriaGear
    48s
    linear
    infinite;
}

@keyframes galeriaGear {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


/* TEXTO */

.galeria-hero-info {
  position:
    relative;

  z-index:
    5;
}

.galeria-hero-eyebrow {
  display:
    block;

  margin-bottom:
    15px;

  color:
    var(--green-dark);

  font-size:
    17px;

  font-weight:
    700;

  letter-spacing:
    5px;
}

.galeria-hero-info h1 {
  max-width:
    650px;

  margin:
    0;

  color:
    var(--green-dark);

  font-family:
    'Roboto',
    sans-serif;

  font-size:
    clamp(
      56px,
      5.5vw,
      84px
    );

  font-weight:
    900;

  line-height:
    0.95;

  letter-spacing:
    -2px;
}

.galeria-hero-info h1 span {
  display:
    block;

  color:
    var(--purple);
}

.galeria-hero-description {
  max-width:
    620px;

  margin:
    30px
    0
    34px;

  color:
    #44525b;

  font-size:
    18px;

  line-height:
    1.6;
}


/* BOTÓN HERO */

.galeria-hero-btn {
  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    14px
    21px;

  background:
    var(--yellow);

  color:
    #ffffff;

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    0.4px;

  box-shadow:
    0 8px 22px
    rgba(249, 179, 51, 0.30);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.galeria-hero-btn:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 28px
    rgba(249, 179, 51, 0.40);
}

.galeria-hero-btn > span:first-child {
  font-size:
    22px;
}

.galeria-hero-arrow {
  font-size:
    19px;

  transition:
    transform 0.25s ease;
}

.galeria-hero-btn:hover
.galeria-hero-arrow {
  transform:
    translateY(3px);
}



/* =========================================================
   HERO COLLAGE
========================================================= */

.galeria-hero-collage {
  position:
    relative;

  height:
    470px;
}


/* FOTOS */

.hero-collage-photo {
  position:
    absolute;

  overflow:
    hidden;

  background:
    #ffffff;

  border:
    7px solid
    #ffffff;

  box-shadow:
    0 18px 45px
    rgba(25, 49, 34, 0.17);
}

.hero-collage-photo img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform
    0.6s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

.hero-collage-photo:hover img {
  transform:
    scale(1.045);
}


/* FOTO PRINCIPAL */

.hero-collage-photo-1 {
  width:
    55%;

  height:
    380px;

  left:
    4%;

  top:
    30px;

  z-index:
    2;

  border-radius:
    36px
    8px
    36px
    8px;

  transform:
    rotate(-2deg);
}


/* FOTO SUPERIOR */

.hero-collage-photo-2 {
  width:
    43%;

  height:
    220px;

  right:
    1%;

  top:
    0;

  z-index:
    3;

  border-radius:
    8px
    32px
    8px
    32px;

  transform:
    rotate(3deg);
}


/* FOTO INFERIOR */

.hero-collage-photo-3 {
  width:
    46%;

  height:
    230px;

  right:
    4%;

  bottom:
    2px;

  z-index:
    4;

  border-radius:
    32px
    8px
    32px
    8px;

  transform:
    rotate(-2deg);
}


/* FORMAS DECORATIVAS */

.collage-decoration {
  position:
    absolute;

  border-radius:
    999px;

  pointer-events:
    none;
}

.collage-decoration-yellow {
  width:
    180px;

  height:
    180px;

  right:
    -55px;

  top:
    115px;

  background:
    var(--yellow);

  opacity:
    0.82;

  z-index:
    1;
}

.collage-decoration-green {
  width:
    135px;

  height:
    135px;

  left:
    -20px;

  bottom:
    0;

  background:
    var(--green-light);

  opacity:
    0.45;

  z-index:
    1;
}





/* =========================================================
   SECCIÓN FOTOS
========================================================= */

.fotos-section {
  position:
    relative;

  overflow:
    hidden;

  padding:
    70px
    25px
    105px;

  background:
    #ffffff;
}

.fotos-container {
  position:
    relative;

  z-index:
    3;

  max-width:
    1400px;

  margin:
    0 auto;
}


/* ENGRANAJES */

.fotos-gear {
  position:
    absolute;

  pointer-events:
    none;

  opacity:
    0.035;
}

.fotos-gear-left {
  width:
    500px;

  left:
    -290px;

  top:
    360px;

  animation:
    galeriaGear
    65s
    linear
    infinite;
}

.fotos-gear-right {
  width:
    600px;

  right:
    -370px;

  bottom:
    100px;

  animation:
    galeriaGearReverse
    75s
    linear
    infinite;
}

@keyframes galeriaGearReverse {

  from {
    transform:
      rotate(360deg);
  }

  to {
    transform:
      rotate(0deg);
  }

}



/* =========================================================
   TÍTULO GALERÍA
========================================================= */

.fotos-heading {
  position:
    relative;

  max-width:
    760px;

  margin:
    0 auto
    38px;

  text-align:
    center;
}

.fotos-title-deco {
  display:
    block;

  width:
    82px;

  margin:
    0 auto
    13px;
}

.fotos-eyebrow {
  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--green);

  font-size:
    13px;

  font-weight:
    900;

  letter-spacing:
    3px;
}

.fotos-heading h2 {
  margin:
    0;

  color:
    var(--green-dark);

  font-family:
    'Lato',
    sans-serif;

  font-size:
    clamp(
      38px,
      4vw,
      56px
    );

  font-weight:
    900;
}

.fotos-heading p {
  max-width:
    670px;

  margin:
    15px
    auto
    0;

  color:
    var(--text-soft);

  font-size:
    17px;

  line-height:
    1.55;
}



/* =========================================================
   FILTROS
========================================================= */

.galeria-filtros {
  max-width:
    1200px;

  margin:
    0 auto
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;
}

.galeria-filtro {
  position:
    relative;

  padding:
    11px
    18px;

  background:
    #f3f6f1;

  color:
    #46534c;

  border:
    1px solid
    #e2e9df;

  border-radius:
    999px;

  cursor:
    pointer;

  font-size:
    14px;

  font-weight:
    800;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.galeria-filtro:hover {
  transform:
    translateY(-2px);

  color:
    var(--green-dark);

  border-color:
    rgba(72, 173, 57, 0.35);

  background:
    #f0f7ed;
}

.galeria-filtro.active {
  background:
    var(--yellow);

  color:
    #ffffff;

  border-color:
    var(--yellow);

  box-shadow:
    0 7px 18px
    rgba(249, 179, 51, 0.27);
}



/* =========================================================
   MASONRY
========================================================= */

/* =========================================================
   GRID DE GALERÍA
========================================================= */

.galeria-masonry {
  width: 100%;

  display: grid;

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

  gap: 16px;

  align-items: start;
}


/* TARJETA GENERADA POR JS */

.galeria-photo {
  position: relative;

  width: 100%;

  margin: 0;

  display: block;

  overflow: hidden;

  background: #edf1eb;

  border-radius: 18px;

  cursor: zoom-in;

  box-shadow:
    0 6px 20px
    rgba(8, 103, 53, 0.06);
}

.galeria-photo {
  opacity: 0;

  transform:
    translateY(35px)
    scale(0.97);

  filter: blur(2px);

  transition:
    opacity 0.65s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease,
    box-shadow 0.3s ease;
}


.galeria-photo.photo-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}


.galeria-photo.photo-visible:hover {
  transform:
    translateY(-4px)
    scale(1.01);
}


/* OVERLAY */

.galeria-photo-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  padding: 18px;

  background:
    linear-gradient(
      to top,
      rgba(8, 40, 23, 0.62),
      transparent 50%
    );

  opacity: 0;

  transition:
    opacity 0.3s ease;
}


.galeria-photo:hover
.galeria-photo-overlay {
  opacity: 1;
}


.galeria-photo-category {
  color: #ffffff;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.galeria-photo-zoom {
  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background:
    rgba(255, 255, 255, 0.94);

  color:
    var(--green-dark);

  border-radius: 50%;
}


.galeria-photo-zoom
.material-symbols-outlined {
  font-size: 21px;
}



/* =========================================================
   VER MÁS
========================================================= */

.galeria-more-wrap {
  margin-top:
    48px;

  display:
    flex;

  justify-content:
    center;
}

.galeria-more-btn {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    14px
    25px;

  background:
    var(--green-dark);

  color:
    #ffffff;

  border-radius:
    999px;

  cursor:
    pointer;

  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    0.4px;

  box-shadow:
    0 8px 22px
    rgba(8, 103, 53, 0.18);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.galeria-more-btn:hover {
  transform:
    translateY(-3px);

  background:
    var(--green);

  box-shadow:
    0 12px 28px
    rgba(8, 103, 53, 0.23);
}

.galeria-more-btn
.material-symbols-outlined {
  font-size:
    21px;
}



/* =========================================================
   CIERRE
========================================================= */

.galeria-cierre {
  position:
    relative;

  overflow:
    hidden;

  padding:
    100px
    25px;

  background:
    radial-gradient(
      circle at 10% 100%,
      rgba(110, 183, 73, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 0%,
      rgba(54, 39, 131, 0.08),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #edf6e8,
      #ffffff 55%,
      #f2effb
    );
}

.galeria-cierre-container {
  position:
    relative;

  z-index:
    2;

  max-width:
    850px;

  margin:
    0 auto;

  text-align:
    center;
}

.galeria-cierre-eyebrow {
  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--green);

  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    4px;
}

.galeria-cierre h2 {
  margin:
    0;

  color:
    var(--green-dark);

  font-family:
    'Lato',
    sans-serif;

  font-size:
    clamp(
      42px,
      5vw,
      66px
    );

  line-height:
    1.02;

  font-weight:
    900;
}

.galeria-cierre h2 span {
  display:
    block;

  color:
    var(--purple);
}

.galeria-cierre p {
  max-width:
    650px;

  margin:
    22px auto
    0;

  color:
    #56656d;

  font-size:
    18px;

  line-height:
    1.6;
}

.galeria-cierre-line {
  width:
    65px;

  height:
    5px;

  margin:
    28px auto
    22px;

  background:
    var(--yellow);

  border-radius:
    999px;
}

.galeria-cierre strong {
  color:
    var(--green-dark);

  font-size:
    19px;
}

.galeria-cierre-gear {
  position:
    absolute;

  width:
    430px;

  right:
    -190px;

  bottom:
    -190px;

  opacity:
    0.055;

  pointer-events:
    none;

  animation:
    galeriaGear
    60s
    linear
    infinite;
}
/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: relative;
  overflow: hidden;

  width: 100%;

  padding: 64px 20px 20px;

  background:
    linear-gradient(
      135deg,
      var(--purple) 0%,
      #1a1060 60%,
      #0d0a3c 100%
    );

  color: #ffffff;
}


/* BRILLO SUPERIOR */

.footer::before {
  content: '';

  position: absolute;

  top: 0;
  left: 50%;

  width: 60%;
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(249, 179, 51, 0.5),
      transparent
    );
}


/* BORDE MULTICOLOR */

.footer::after {
  content: '';

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 4px;

  background:
    linear-gradient(
      to right,
      var(--yellow),
      var(--green-light),
      var(--green),
      var(--green-dark),
      var(--purple)
    );
}


/* =========================================================
   CONTENEDOR
========================================================= */

.footer-container {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr;

  gap: 50px;

  align-items: start;
}


/* =========================================================
   COLUMNAS
========================================================= */

.footer-col {
  min-width: 0;
}


.footer-col h4 {
  margin: 0 0 18px;

  font-family:
    'Lato',
    sans-serif;

  font-size: 16px;

  font-weight: 700;

  color: var(--yellow);

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


.footer-col p {
  margin: 0 0 6px;

  color:
    rgba(255, 255, 255, 0.75);

  font-size: 15px;

  line-height: 1.6;
}


/* =========================================================
   LOGO
========================================================= */

.footer-logo {
  display: block;

  width: 180px;
  height: auto;

  margin: 0 0 16px;
}


/* =========================================================
   LINKS
========================================================= */

.footer-col ul {
  margin: 0;

  padding: 0;

  list-style: none;
}


.footer-col ul li {
  margin-bottom: 9px;
}


.footer-col ul a {
  display: inline-block;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 15px;

  text-decoration: none;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}


.footer-col ul a:hover {
  color: var(--yellow);

  padding-left: 5px;
}


/* =========================================================
   REDES
========================================================= */

.footer-social {
  display: flex;

  align-items: center;

  gap: 14px;

  flex-wrap: wrap;
}


.footer-social a {
  width: 56px;
  height: 56px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background:
    rgba(255, 255, 255, 0.08);

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 50%;

  transition:
    background 0.28s ease,
    transform 0.28s ease,
    border-color 0.28s ease;
}


.footer-social a:hover {
  background: var(--green);

  border-color: var(--green);

  transform:
    translateY(-4px);
}


.footer-social svg {
  display: block;

  width: 26px;
  height: 26px;

  fill: #ffffff;
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.footer-bottom {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 1200px;

  margin: 44px auto 0;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 14px;

  line-height: 1.6;

  text-align: center;
}


.footer-credit {
  color: var(--yellow);

  font-weight: 600;

  text-decoration: none;

  transition:
    opacity 0.25s ease;
}


.footer-credit:hover {
  opacity: 0.8;

  text-decoration: underline;
}


/* =========================================================
   FOOTER — TABLET
   ≤ 900px
========================================================= */

@media (max-width: 900px) {

  .footer {
    padding:
      54px
      28px
      20px;
  }


  .footer-container {
    grid-template-columns:
      1.25fr
      1fr;

    gap:
      40px
      50px;
  }


  .footer-col:first-child {
    grid-column:
      1 / -1;

    max-width:
      560px;
  }


  .footer-bottom {
    margin-top: 40px;
  }

}


/* =========================================================
   FOOTER — MOBILE
   ≤ 640px
========================================================= */

@media (max-width: 640px) {

  .footer {
    padding:
      48px
      20px
      20px;
  }


  .footer-container {
    grid-template-columns:
      1fr;

    gap: 32px;

    text-align: center;
  }


  .footer-col:first-child {
    grid-column: auto;

    max-width: none;
  }


  .footer-logo {
    width: 160px;

    margin:
      0 auto
      16px;
  }


  .footer-col h4 {
    margin-bottom: 15px;

    font-size: 15px;
  }


  .footer-col p {
    font-size: 14px;
  }


  .footer-col ul a {
    font-size: 14px;
  }


  .footer-col ul a:hover {
    padding-left: 0;
  }


  .footer-social {
    justify-content: center;
  }


  .footer-social a {
    width: 52px;
    height: 52px;
  }


  .footer-social svg {
    width: 24px;
    height: 24px;
  }


  .footer-bottom {
    margin-top: 34px;

    padding-top: 18px;

    font-size: 13px;
  }

}


/* =========================================================
   FOOTER — MOBILE PEQUEÑO
   ≤ 480px
========================================================= */

@media (max-width: 480px) {

  .footer {
    padding:
      44px
      18px
      18px;
  }


  .footer-container {
    gap: 28px;
  }


  .footer-logo {
    width: 150px;
  }


  .footer-col p {
    font-size: 13.5px;

    line-height: 1.55;
  }


  .footer-col ul li {
    margin-bottom: 8px;
  }


  .footer-social a {
    width: 48px;
    height: 48px;
  }


  .footer-social svg {
    width: 22px;
    height: 22px;
  }


  .footer-bottom {
    margin-top: 30px;

    font-size: 12.5px;

    line-height: 1.7;
  }

}

/* =========================================================
   LIGHTBOX
========================================================= */

.galeria-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    99999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    35px
    90px;

  background:
    rgba(7, 16, 12, 0.94);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.galeria-lightbox.active {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


/* CONTENIDO */

.lightbox-content {
  position:
    relative;

  max-width:
    min(1200px, 88vw);

  max-height:
    90vh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    12px;
}

.lightbox-content img {
  display:
    block;

  max-width:
    100%;

  max-height:
    82vh;

  width:
    auto;

  height:
    auto;

  object-fit:
    contain;

  border-radius:
    8px;

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.4);
}

.lightbox-info {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    rgba(255, 255, 255, 0.78);

  font-size:
    13px;

  font-weight:
    700;
}


/* CERRAR */

.lightbox-close {
  position:
    absolute;

  top:
    24px;

  right:
    28px;

  width:
    48px;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    rgba(255, 255, 255, 0.11);

  color:
    #ffffff;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius:
    50%;

  cursor:
    pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.lightbox-close:hover {
  background:
    var(--yellow);

  transform:
    rotate(5deg);
}


/* FLECHAS */

.lightbox-arrow {
  position:
    absolute;

  top:
    50%;

  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    rgba(255, 255, 255, 0.10);

  color:
    #ffffff;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius:
    50%;

  cursor:
    pointer;

  transform:
    translateY(-50%);

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.lightbox-arrow:hover {
  background:
    var(--yellow);

  transform:
    translateY(-50%)
    scale(1.06);
}

.lightbox-prev {
  left:
    25px;
}

.lightbox-next {
  right:
    25px;
}





/* =========================================================
   LAPTOP / TABLET GRANDE ≤ 1150px
========================================================= */

@media (max-width: 1150px) {

  .nav-menu,
  .nav-links {
    gap:
      20px;
  }

  .nav-menu a {
    font-size:
      15px;
  }


  /* HERO */

  .galeria-hero-container {
    grid-template-columns:
      0.95fr
      1.05fr;

    gap:
      35px;

    padding-left:
      30px;

    padding-right:
      30px;
  }

  .galeria-hero-info h1 {
    font-size:
      clamp(
        50px,
        5.7vw,
        70px
      );
  }

  .galeria-hero-collage {
    height:
      430px;
  }



  .galeria-masonry {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

}



/* =========================================================
   TABLET ≤ 900px
========================================================= */

@media (max-width: 900px) {


  /* HERO */

  .galeria-hero-container {
    min-height:
      auto;

    padding:
      65px
      28px
      120px;

    grid-template-columns:
      1fr;

    gap:
      55px;
  }

  .galeria-hero-info {
    max-width:
      700px;
  }

  .galeria-hero-info h1 {
    max-width:
      720px;

    font-size:
      clamp(
        52px,
        9vw,
        76px
      );
  }

  .galeria-hero-description {
    max-width:
      680px;
  }

  .galeria-hero-collage {
    width:
      100%;

    max-width:
      760px;

    height:
      470px;

    margin:
      0 auto;
  }


  /* GALERÍA */

  .fotos-section {
    padding:
      60px
      22px
      90px;
  }

  .galeria-masonry {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;
  }

  .galeria-photo {
    margin: 0;
  }

}

/* =========================================================
   MOBILE ≤ 768px
========================================================= */

@media (max-width: 768px) {


  /* NAVBAR */

  .nav-container {
    position:
      relative;

    padding:
      12px
      18px;
  }

  .nav-logo img {
    height:
      40px;
  }

  .nav-toggle {
    display:
      flex;
  }

  .nav-menu {
    position:
      absolute;

    top:
      100%;

    left:
      0;

    width:
      100%;

    background:
      rgba(255, 255, 255, 0.98);

    backdrop-filter:
      blur(12px);

    -webkit-backdrop-filter:
      blur(12px);

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      20px;

    padding:
      22px;

    border-radius:
      0
      0
      20px
      20px;

    box-shadow:
      0 16px 35px
      rgba(0, 0, 0, 0.10);

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateY(-8px);

    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0.3s ease;
  }

  .nav-menu.active {
    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      translateY(0);
  }

  .nav-links {
    width:
      100%;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      18px;
  }

  .nav-menu a {
    font-size:
      16px;
  }

  .nav-btn {
    width:
      100%;

    text-align:
      center;
  }

  .dropdown {
    width:
      100%;
  }

  .dropdown-menu {
    position:
      static;

    width:
      100%;

    min-width:
      0;

    margin-top:
      10px;

    display:
      none;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      none;

    box-shadow:
      none;

    border:
      0;

    background:
      #f5f8f3;
  }

  .dropdown:hover
  .dropdown-menu {
    display:
      block;
  }


  /* =========================================================
     HERO
  ========================================================= */

  .galeria-hero-container {
    padding:
      55px
      20px
      85px;

    gap:
      48px;
  }

  .galeria-hero-eyebrow {
    font-size:
      13px;

    letter-spacing:
      4px;
  }

  .galeria-hero-info h1 {
    font-size:
      clamp(
        45px,
        12vw,
        65px
      );

    letter-spacing:
      -1px;
  }

  .galeria-hero-description {
    margin:
      24px
      0
      28px;

    font-size:
      16px;
  }


  /* =========================================================
     COLLAGE HERO
  ========================================================= */

  .galeria-hero-collage {
    width:
      100%;

    max-width:
      560px;

    height:
      auto;

    aspect-ratio:
      1 / 0.92;

    margin:
      0 auto;
  }


  /* FOTO PRINCIPAL */

  .hero-collage-photo-1 {
    width:
      59%;

    height:
      auto;

    aspect-ratio:
      0.82 / 1;

    left:
      1%;

    top:
      7%;

    border-radius:
      26px
      7px
      26px
      7px;
  }


  /* FOTO SUPERIOR DERECHA */

  .hero-collage-photo-2 {
    width:
      45%;

    height:
      auto;

    aspect-ratio:
      1.25 / 1;

    right:
      0;

    top:
      0;

    border-radius:
      7px
      24px
      7px
      24px;
  }


  /* FOTO INFERIOR DERECHA */

  .hero-collage-photo-3 {
    width:
      48%;

    height:
      auto;

    aspect-ratio:
      1.15 / 1;

    right:
      2%;

    bottom:
      4%;

    border-radius:
      24px
      7px
      24px
      7px;
  }


  .hero-collage-photo img {
    width:
      100%;

    height:
      100%;

    object-fit:
      cover;
  }


  .collage-decoration-yellow {
    width:
      30%;

    height:
      auto;

    aspect-ratio:
      1;

    right:
      -8%;

    top:
      28%;
  }

  .collage-decoration-green {
    width:
      23%;

    height:
      auto;

    aspect-ratio:
      1;

    left:
      -5%;

    bottom:
      1%;
  }


  /* =========================================================
     FOTOS
  ========================================================= */

  .fotos-section {
    padding:
      52px
      16px
      80px;
  }

  .fotos-heading {
    margin-bottom:
      30px;
  }

  .fotos-heading h2 {
    font-size:
      40px;
  }

  .fotos-heading p {
    font-size:
      15px;
  }


  /* FILTROS SCROLL HORIZONTAL */

  .galeria-filtros {
    width:
      calc(100% + 32px);

    margin-left:
      -16px;

    margin-right:
      -16px;

    padding:
      3px
      16px
      12px;

    justify-content:
      flex-start;

    flex-wrap:
      nowrap;

    overflow-x:
      auto;

    scrollbar-width:
      none;
  }

  .galeria-filtros::-webkit-scrollbar {
    display:
      none;
  }

  .galeria-filtro {
    flex:
      0 0 auto;

    white-space:
      nowrap;

    padding:
      10px
      16px;

    font-size:
      13px;
  }


  /* GRID */

  .galeria-masonry {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      10px;
  }

  .galeria-photo {
    margin:
      0;

    border-radius:
      13px;
  }

  .galeria-photo-overlay {
    display:
      none;
  }


  /* =========================================================
     CIERRE
  ========================================================= */

  .galeria-cierre {
    padding:
      75px
      20px;
  }

  .galeria-cierre h2 {
    font-size:
      clamp(
        38px,
        10vw,
        52px
      );
  }

  .galeria-cierre p {
    font-size:
      16px;
  }


  /* =========================================================
     LIGHTBOX
  ========================================================= */

  .galeria-lightbox {
    padding:
      70px
      12px
      55px;
  }

  .lightbox-content {
    max-width:
      100%;
  }

  .lightbox-content img {
    max-height:
      75vh;
  }

  .lightbox-close {
    top:
      14px;

    right:
      14px;

    width:
      43px;

    height:
      43px;
  }

  .lightbox-arrow {
    width:
      42px;

    height:
      42px;

    top:
      auto;

    bottom:
      12px;

    transform:
      none;
  }

  .lightbox-arrow:hover {
    transform:
      scale(1.05);
  }

  .lightbox-prev {
    left:
      calc(50% - 54px);
  }

  .lightbox-next {
    right:
      calc(50% - 54px);
  }

  .lightbox-info {
    padding:
      0
      4px;
  }

}



/* =========================================================
   MOBILE PEQUEÑO ≤ 480px
========================================================= */

@media (max-width: 480px) {


  /* =========================================================
     HERO
  ========================================================= */

  .galeria-hero-container {
    padding-top:
      45px;

    padding-left:
      18px;

    padding-right:
      18px;

    padding-bottom:
      70px;

    gap:
      42px;
  }

  .galeria-hero-info h1 {
    font-size:
      clamp(
        40px,
        12.5vw,
        54px
      );

    line-height:
      0.98;
  }

  .galeria-hero-btn {
    width:
      100%;

    justify-content:
      center;
  }


  /* =========================================================
     COLLAGE
  ========================================================= */

  .galeria-hero-collage {
    width:
      calc(100% - 4px);

    max-width:
      430px;

    height:
      auto;

    aspect-ratio:
      1 / 0.98;

    margin:
      0 auto;
  }

  .hero-collage-photo {
    border-width:
      5px;
  }


  /* FOTO PRINCIPAL */

  .hero-collage-photo-1 {
    width:
      61%;

    height:
      auto;

    aspect-ratio:
      0.82 / 1;

    left:
      0;

    top:
      8%;

    border-radius:
      22px
      6px
      22px
      6px;
  }


  /* FOTO SUPERIOR */

  .hero-collage-photo-2 {
    width:
      46%;

    height:
      auto;

    aspect-ratio:
      1.22 / 1;

    right:
      0;

    top:
      0;

    border-radius:
      6px
      20px
      6px
      20px;
  }


  /* FOTO INFERIOR */

  .hero-collage-photo-3 {
    width:
      49%;

    height:
      auto;

    aspect-ratio:
      1.12 / 1;

    right:
      1%;

    bottom:
      5%;

    border-radius:
      20px
      6px
      20px
      6px;
  }


  .hero-collage-photo img {
    width:
      100%;

    height:
      100%;

    object-fit:
      cover;
  }


  /* DECORACIONES */

  .collage-decoration-yellow {
    width:
      31%;

    height:
      auto;

    aspect-ratio:
      1;

    right:
      -9%;

    top:
      29%;
  }

  .collage-decoration-green {
    width:
      23%;

    height:
      auto;

    aspect-ratio:
      1;

    left:
      -6%;

    bottom:
      1%;
  }


  /* =========================================================
     GALERÍA
  ========================================================= */

  .fotos-heading h2 {
    font-size:
      36px;
  }

  .galeria-masonry {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      8px;
  }

  .galeria-photo {
    margin:
      0;

    border-radius:
      11px;
  }


  /* =========================================================
     BOTÓN VER MÁS
  ========================================================= */

  .galeria-more-btn {
    width:
      100%;

    max-width:
      300px;

    justify-content:
      center;
  }

}

/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

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

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto;

    animation-duration:
      0.01ms;

    animation-iteration-count:
      1;

    transition-duration:
      0.01ms;
  }

}