* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  @font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-VariableFont_wght.ttf");
  }
  
  body {
    min-height: 100vh;
    background: #000;
    padding: 0;
    margin: 0;
    font-family: "Montserrat";
  }
  body::-webkit-scrollbar {
    background: transparent;
    width: 5px;
  }
  body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5000px;
  }

  a{
    text-decoration: none;
    color: unset;
  }

.logo-galeria{
    width: 100px;
    top: 20px;
    right: 20px;
    position: fixed;
    fill: #fff;
    z-index: 1;
}

.btn_back{
    position: fixed;
    top: 20px;
    left: 20px;
    color: #fff;
    z-index: 1;
    display: block;
    padding: 8px 40px;
    border-radius: 500px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.gallery {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
  }
  
  .cards {
    position: absolute;
    width: 800px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .cards li {
    list-style: none;
    width: 800px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  
  .cards li img {
    width: auto;
    height: 100%;
    object-fit: cover;
    border-radius: 0.8rem;
    cursor: pointer;
  }
  
  
  .actions {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  
  button {
    outline: none;
    border: none;
    background: transparent;
    border: 2px solid #fff;
    /* padding: 6px 40px; */
    margin: 0 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
  }
  
  button:hover {
    color: #000;
    background: #fff;
  }
  
  .logo-gallery {
    position: fixed;
    width: 180px;
    right: 2%;
    top: 5%;
    z-index: 1;
  }
  
  .btn-regresar {
    position: fixed;
    top: 5%;
    left: 2%;
    background: #fff;
    color: #000;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 5px;
    text-decoration: none;
    z-index: 1;
    transition: 0.3s;
    border: 2px solid #fff;
  }
  .btn-regresar:hover {
    background: transparent;
    color: #fff;
  }
  
  .image-modal {
    opacity: 0;
    pointer-events: none;
    display: flex;
    transition: 0.2s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .image-modal img {
    max-width: 90%;
    max-height: 90%;
    cursor: pointer;
  }
  
  .logo-animado-blanco-verde-fijo {
    position: fixed;
    top: 5%;
    right: 2%;
    z-index: 100;
    width: 180px;
    height: 200px;
    opacity: 1;
    pointer-events: none;
    transition: 0.3s;
  }
  
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path,
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde polygon {
    stroke-miterlimit: 10;
    stroke-width: 0.5px;
  }
  
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde .logo-trazo-blanco {
    stroke: #fff;
    fill: rgba(84, 86, 90, 0.2);
  }
  
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde .logo-trazo-verde {
    stroke: #fff;
    fill: rgba(0, 131, 117, 0.2);
  }
  
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(1) {
    stroke-dasharray: 116.11936950683594;
    stroke-dashoffset: 116.11936950683594;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(2) {
    stroke-dasharray: 178.3330841064453;
    stroke-dashoffset: 178.3330841064453;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(3) {
    stroke-dasharray: 116.11941528320312;
    stroke-dashoffset: 116.11941528320312;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(4) {
    stroke-dasharray: 26.665199279785156;
    stroke-dashoffset: 26.665199279785156;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(5) {
    stroke-dasharray: 22.386693954467773;
    stroke-dashoffset: 22.386693954467773;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(6) {
    stroke-dasharray: 93.6985855102539;
    stroke-dashoffset: 93.6985855102539;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(7) {
    stroke-dasharray: 17.037858963012695;
    stroke-dashoffset: 17.037858963012695;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(8) {
    stroke-dasharray: 59.94850540161133;
    stroke-dashoffset: 59.94850540161133;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(9) {
    stroke-dasharray: 34.16584396362305;
    stroke-dashoffset: 34.16584396362305;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(10) {
    stroke-dasharray: 36.006839752197266;
    stroke-dashoffset: 36.006839752197266;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(11) {
    stroke-dasharray: 41.60911560058594;
    stroke-dashoffset: 41.60911560058594;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(12) {
    stroke-dasharray: 43.097434997558594;
    stroke-dashoffset: 43.097434997558594;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde path:nth-of-type(13) {
    stroke-dasharray: 40.06523895263672;
    stroke-dashoffset: 40.06523895263672;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde polygon:nth-of-type(1) {
    stroke-dasharray: 37.33442687988281;
    stroke-dashoffset: 37.33442687988281;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde polygon:nth-of-type(2) {
    stroke-dasharray: 37.31734085083008;
    stroke-dashoffset: 37.31734085083008;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  .logo-animado-blanco-verde-fijo #logo-jcjf-blanco-verde polygon:nth-of-type(3) {
    stroke-dasharray: 160.32000732421875;
    stroke-dashoffset: 160.32000732421875;
    animation: line-again 8s ease forwards infinite,
      logo-color-blanco 8s ease forwards 1s infinite;
  }
  
  @keyframes line-again {
    0% {
      stroke-dashoffset: "";
    }
    50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: "";
    }
  }
  
  @keyframes logo-color-blanco {
    0% {
      fill: rgba(255, 255, 255, 0.2);
    }
    50% {
      fill: #fff;
    }
    100% {
      fill: rgba(255, 255, 255, 0.2);
    }
  }
  
  /* EFECTO BOTON */
  @property --hue {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --rotate {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --bg-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --bg-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --glow-translate-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --bg-size {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --glow-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --glow-blur {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --glow-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 2;
  }
  @property --glow-radius {
    syntax: "<number>";
    inherits: true;
    initial-value: 2;
  }
  @property --white-shadow {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  :root {
    --debug: 0;
    --supported: 0;
    --not-supported: 0;
    --card-color: hsl(260deg 100% 3%);
    --text-color: hsl(260deg 10% 55%);
    --card-radius: 3.6vw;
    --card-width: 180px;
    --border-width: 8px;
    --bg-size: 1;
    --hue: 0;
    --hue-speed: 1;
    --rotate: 0;
    --animation-speed: 4s;
    --interaction-speed: 0.55s;
    --glow-scale: 1.5;
    --scale-factor: 1;
    --glow-blur: 6;
    --glow-opacity: 1;
    --glow-radius: 100;
    --glow-rotate-unit: 1deg;
  }
  
  .btn-fixed {
    position: fixed;
    width: max-content;
    height: max-content;
    top: 5%;
    left: 2%;
    z-index: 1;
  }
  
  .button-effect {
    width: var(--card-width);
    /* width: min(480px, var(--card-width)); */
    /* aspect-ratio: 1.5/1; */
    color: white;
    /* margin: auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border-radius: var(--card-radius);
    cursor: pointer;
    margin: 15px 0;
  }
  .button-effect:hover > .descripcion {
    mix-blend-mode: darken;
    --text-color: #fff;
    box-shadow: 0 0 calc(var(--white-shadow) * 1vw)
      calc(var(--white-shadow) * 0.15vw) rgba(255, 255, 255, 0.2);
    animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
  }
  .button-effect:hover > .descripcion:before {
    --bg-size: 15;
    animation-play-state: paused;
    transition: --bg-size var(--interaction-speed) ease;
  }
  .button-effect:hover .glow {
    --glow-blur: 1.5;
    --glow-opacity: 0.6;
    --glow-scale: 2.5;
    --glow-radius: 0;
    --rotate: 900;
    --glow-rotate-unit: 0;
    --scale-factor: 1.25;
    animation-play-state: paused;
  }
  .button-effect:hover .glow:after {
    --glow-translate-y: 0;
    animation-play-state: paused;
    transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease,
      --glow-opacity 0.05s ease, --glow-scale 0.05s ease, --glow-radius 0.05s ease;
  }
  .button-effect:before,
  .descripcion:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
  }
  .button-effect > .descripcion {
    position: absolute;
    width: 100%;
    height: 100%;
    background: hsl(0, 0%, 0%);
    border-radius: calc(calc(var(--card-radius) * 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-transform: uppercase;
    font-stretch: 150%;
    font-size: 14px;
    z-index: 1;
    /* font-size: clamp(1.5vw, 1.5vmin, 32px); */
    color: var(--text-color);
    padding: calc(var(--card-width) / 9);
  }
  
  .button-effect > .descripcion span {
    display: inline-block;
    padding: 0.25em;
    border-radius: 4px;
    background: var(--text-color);
    color: black;
    margin-right: 8px;
    font-weight: 900;
  }
  .button-effect > .descripcion:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: calc(calc(var(--card-radius) * 0.9));
    /* box-shadow: 0 0 20px black; */
    mix-blend-mode: color-burn;
    z-index: -1;
    background: transparent
      radial-gradient(
        30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),
        hsl(0, 0%, 100%) calc(0% * var(--bg-size)),
        hsl(0, 0%, 100%) calc(20% * var(--bg-size)),
        hsl(0, 0%, 100%) calc(40% * var(--bg-size)),
        transparent 100%
      );
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    animation: hue-animation var(--animation-speed) linear infinite,
      rotate-bg var(--animation-speed) linear infinite;
    transition: --bg-size var(--interaction-speed) ease;
  }
  .button-effect.be-inicio > .descripcion:before {
    background: transparent
      radial-gradient(
        30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),
        hsl(0, 0%, 100%) calc(0% * var(--bg-size)),
        hsl(0, 0%, 100%) calc(20% * var(--bg-size)),
        hsl(0, 0%, 100%) calc(40% * var(--bg-size)),
        transparent 100%
      );
  }
  .button-effect .glow {
    --glow-translate-y: 0;
    display: block;
    position: absolute;
    width: calc(var(--card-width) / 5);
    height: calc(var(--card-width) / 5);
    animation: rotate var(--animation-speed) linear infinite;
    transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
    transform-origin: center;
    border-radius: calc(var(--glow-radius) * 10vw);
  }
  /* .button-effect .glow:after {
    content: "";
    display: block;
    z-index: -2;
    filter: blur(calc(var(--glow-blur) * 10px));
    width: 130%;
    height: 130%;
    left: -15%;
    top: -15%;
    background: hsl(174, 100%, 26%);
    position: relative;
    border-radius: calc(var(--glow-radius) * 10vw);
    animation: hue-animation var(--animation-speed) linear infinite;
    transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));
    opacity: var(--glow-opacity);
  } */
  
  @keyframes shadow-pulse {
    0%,
    24%,
    46%,
    73%,
    96% {
      --white-shadow: 0.5;
    }
    12%,
    28%,
    41%,
    63%,
    75%,
    82%,
    98% {
      --white-shadow: 2.5;
    }
    6%,
    32%,
    57% {
      --white-shadow: 1.3;
    }
    18%,
    52%,
    88% {
      --white-shadow: 3.5;
    }
  }
  @keyframes rotate-bg {
    0% {
      --bg-x: 0;
      --bg-y: 0;
    }
    25% {
      --bg-x: 100;
      --bg-y: 0;
    }
    50% {
      --bg-x: 100;
      --bg-y: 100;
    }
    75% {
      --bg-x: 0;
      --bg-y: 100;
    }
    100% {
      --bg-x: 0;
      --bg-y: 0;
    }
  }
  @keyframes rotate {
    from {
      --rotate: -70;
      --glow-translate-y: -65;
    }
    25% {
      --glow-translate-y: -65;
    }
    50% {
      --glow-translate-y: -65;
    }
    60%,
    75% {
      --glow-translate-y: -65;
    }
    85% {
      --glow-translate-y: -65;
    }
    to {
      --rotate: calc(360 - 70);
      --glow-translate-y: -65;
    }
  }
  @keyframes hue-animation {
    0% {
      --hue: 0;
    }
    100% {
      --hue: 360;
    }
  }
  
  @media screen and (min-width: 280px) and (max-width: 950px) {
    .cards {
      position: absolute;
      width: 300px;
      height: 150px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .cards li {
      list-style: none;
      width: 300px;
      height: 150px;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
  
    .logo-animado-blanco-verde-fijo {
      width: 150px;
      height: 200px;
      right: 50%;
      transform: translateX(50%);
    }
  
    .btn-fixed {
      position: fixed;
      width: max-content;
      height: max-content;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
  }