@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

        /* =========================
            RESET & BASE
            ========================= */
        html,
        body {
             margin: 0;
             padding: 0;
             overflow-x: hidden;
             font-family: 'Merriweather', sans-serif;
             color: #333;
             line-height: 1.6;
             width: 100vw;
             min-width: 100vw;
        }

        html {
             scroll-behavior: smooth;
        }

        hr {
             border-color: #ccc;
             border-width: 1px;
             margin: 40px 0;
        }

        /* =========================
            LAYOUT
            ========================= */
        .content {
             padding-top: 120px;
             /* Padding for fixed header */
             width: 100%;
             min-width: 100%;
             margin: 0;
        }

        /* ==============F==========
            HEADER & NAVBAR
            ========================= */
        .header-area {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             width: 100vw;
             max-width: 100vw;
             z-index: 1000;
        }

        .navbar-transparent {
             background-color: #fff;
             width: 100vw;
             max-width: 100vw;
             top: 0;
             left: 0;
             right: 0;
             position: relative;
             box-sizing: border-box;
        }

        .navbar.scrolled {
             background-color: #fff !important;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
             padding: 10px 0;
             width: 100vw;
             max-width: 100vw;
             left: 0;
             right: 0;
             position: relative;
             box-sizing: border-box;
        }

        .nav-logo {
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100%;
             width: 100vw;
             max-width: 100vw;
             padding: 0;
             left: 0;
             right: 0;
             box-sizing: border-box;
        }

        .nav-logo img {
             max-width: 140px;
             margin: 0 auto;
             display: block;
             transition: transform 0.3s ease-in-out;
        }

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

        .nav-btn {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 10px;
             /* Increased gap for larger buttons */
             border-radius: 22px;
             font-family: 'Merriweather', sans-serif;
             transition: all 0.3s;
             padding: 10px 20px;
             /* Increased padding for larger buttons */
             font-size: 1.2em;
             /* Increased font size for larger buttons */
             background: #fff;
             color: #525459;
             border: 2px solid #525459;
             text-align: center;
        }

        .nav-btn:hover {
             background: #808080;
             color: #fff;
             box-shadow: 0 4px 16px rgba(128, 128, 128, 0.15);
             transform: translateY(-2px);
             border: 2px solid #808080;
        }

        .nav-btn-check:checked+.btn,
        .btn.active,
        .btn.show,
        .btn:first-child:active,
        :not(.btn-check)+.btn:active {
             background: #808080;
             color: #fff;
             box-shadow: 0 4px 16px rgba(128, 128, 128, 0.15);
             transform: translateY(-2px);
             border: 2px solid #808080;
        }


        /* =========================
            BANNER
            ========================= */
        .banner-container {
             width: 100%;
             margin: 0 auto;
             border-radius: 8px;
             overflow: hidden;
             box-shadow: 0 4px 6px rgba(4, 4, 4, 0.1);
        }

        .banner-container img {
             max-width: 100%;
             width: 100%;
             height: auto;
             display: block;
        }

        /* =========================
            SECTIONS
            ========================= */
        .new-section {
            

             background-position: center;
             min-height: 400px;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 20px;
             width: 90%;
             margin: 0 auto;
             border-radius: 12px;
        }

        .new-section-content {
             background: rgba(255, 255, 255, 0);
             border-radius: 12px;
             max-width: 1600px;
             padding: 40px 30px;
             text-align: justify;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
             font-family: 'montserrat', sans-serif;
             color: #333;
        }

        .new-section-content p {
             font-size: 1.3rem;
             line-height: 1.8;
             margin-bottom: 20px;
        }

        .new-section-content p:last-child {
             font-size: 1.6rem;
             font-weight: bold;
             color: #000;
        }

        /*EVENTO SECTION
            ========================= */
        .evento-section {
             padding: 60px 20px;
             background-color: #fff;
        }

        .evento-title {
             font-size: 2rem;
             font-weight: bold;
             color: #6e6e6e;
             position: relative;
        }

        .evento-divider {
             width: 40px;
             height: 3px;
             background-color: #f5b100;
             margin: 10px auto 30px;
             border-radius: 2px;
        }

        .evento-card {
             background: #edebeb;
             border-radius: 12px;
             padding: 25px 15px;
             transition: transform 0.3s, box-shadow 0.3s;
             margin-bottom: 20px;
        }

        .evento-card:hover {
             transform: translateY(-8px);
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .evento-img-wrapper {
             width: 380px;
             height: 380px;
             margin: 0 auto 20px;

             overflow: hidden;
             background-color: #f2f2f2;
             display: flex;
             align-items: center;
             justify-content: center;
        }

        .evento-img-wrapper img {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
             border-radius: 10px;
        }

        .evento-name {
             font-size: 1.2rem;
             font-weight: 600;
             color: #0056d2;
             margin-bottom: 8px;
        }

        .evento-description {
             color: #6e6e6e;
             font-size: 1.2rem;
        }

        /* =========================
            STATS SECTION
            ========================= */
        .stats {
             padding: 60px 0;
             background-color: #f9f9f9;
        }

        .stats-card {
             position: relative;
             height: 240px;
             background: #fff;
             border-radius: 12px;
             padding: 60px 20px 20px 20px;
             text-align: center;
             border: 2px solid transparent;
             overflow: visible;
             transition: transform 0.3s, box-shadow 0.3s;
             z-index: 1;
             color: #6e6e6e;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .stats-card::before {
             content: "";
             position: absolute;
             inset: 0;
             border: 2px solid #a3a3a3;
             border-radius: 12px;
             transform: scaleY(0);
             transform-origin: top;
             transition: transform 0.4s;
             z-index: 0;
        }

        .stats-card:hover::before {
             transform: scaleY(1);
        }

        .stats-card:hover {
             transform: translateY(-8px) scale(1.03);
             box-shadow: 0 8px 24px #6e6e6e;
        }

        .stats-card i {
             font-size: 2.8rem;
             color: #D1CB4D;
             margin-top: -40px;
             margin-bottom: 10px;
             background-color: #ffffff00;
             padding: 14px;
             border-radius: 50%;
             border: 2px solid #D1CB4D;
             box-shadow: 0px 4px 20px #D1CB4D;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             width: 60px;
             height: 60px;
             position: relative;
             z-index: 2;
        }






        .stats .purecounter {
             font-size: 2.4rem;
             font-weight: bold;
             color: #6e6e6e;
        }

        .stats p {
             font-size: 1.1rem;
             color: #6e6e6e;
             margin-top: 8px;
        }

        .stats-number {
             font-size: 2.5rem;
             font-weight: bold;
             color: #666;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             gap: 2px;
        }

        .stats-number .purecounter {
             display: inline-block;
        }

        /* =========================
            RESPONSIVE
            ========================= */
        @media (max-width: 768px) {
             .nav-btn {
                  font-size: 13px;
                  padding: 6px 12px;
             }

             .stats-card {
                  height: 220px;
                  padding-top: 50px;
             }

             .stats-card i {
                  font-size: 2.2rem;
                  width: 50px;
                  height: 50px;
                  margin-top: -30px;
             }

             .stats .purecounter {
                  font-size: 2rem;
             }

             .stats p {
                  font-size: 1rem;
             }
        }

        @media (max-width: 767px) {
             .new-section {
                  width: 90%;
                  padding: 10px;
                  margin: 0 auto;
             }

             .new-section-content {
                  padding: 15px;
             }

             .new-section-content p,
             .new-section-content p:last-child {
                  font-size: 0.8rem;
             }

             img {
                  display: block;
                  margin: 0 auto;
                  width: 30%;
                  height: auto;
             }

             .nav-logo img {
                  display: block;
                  margin: 0 auto;
                  max-width: 100px;
             }

             .nav-logo {
                  padding: 10px 0;
             }

             .evento-img-wrapper {
                  width: 120px;
                  height: 120px;
             }

             .evento-title,
             li,
             p {
                  font-size: 0.6rem;
             }

             p {
                  font-size: 0.5rem;
             }

             .nav-btn-group {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  gap: 12px;
                  margin-top: 20px;
                  margin-bottom: 8px;
                  flex-wrap: nowrap;
             }

             .nav-btn {
                  font-size: 0.85em;
                  /* fuente mas pequeña */
                  padding: 0.35em 1.3em;
                  border: 1.2px solid #6e6e6e;
                  border-radius: 18px;
                  background: #fff !important;
                  color: #444 !important;
                  font-family: 'Merriweather', sans-serif;
                  transition: all 0.2s;
                  cursor: pointer;
                  margin: 0;
                  box-shadow: none;
                  white-space: nowrap;
             }

             .nav-btn:hover,
             .nav-btn:active,
             .nav-btn:focus {
                  background: #f5f5f5 !important;
                  color: #222 !important;
                  border-color: #6e6e6e !important;
                  box-shadow: 0 2px 8px rgba(128, 128, 128, 0.08);
             }

             @media (max-width: 767px) {
                  .nav-btn-group {
                       gap: 8px;
                       margin-top: 14px;
                       margin-bottom: 6px;
                       display: flex;
                       justify-content: center;
                       align-items: center;
                  }

                  .nav-btn {
                       font-size: 0.75em;
                       /* fuente mas peque a */
                       padding: 0.25em 0.8em;
                       border-radius: 15px;
                  }

                  .nav-btn:hover,
                  .nav-btn:active,
                  .nav-btn:focus {
                       background: #6e6e6e !important;
                       color: #fffdfd !important;
                       border-color: #6e6e6e !important;
                       box-shadow: 0 2px 8px rgba(128, 128, 128, 0.08);
                  }
             }

             html {
                  scroll-behavior: smooth;
             }

             hr {
                  border-color: #ccc;
                  border-width: 1px;
                  margin: 40px 0;
             }

          
           

             /* ==============F==========
            HEADER & NAVBAR
            ========================= */
             .header-area {
                  position: fixed;
                  top: 0;
                  left: 0;
                  right: 0;
                  width: 100vw;
                  max-width: 100vw;
                  z-index: 1000;
             }

             .navbar-transparent {
                  background-color: #fff;
                  width: 100vw;
                  max-width: 100vw;
                  top: 0;
                  left: 0;
                  right: 0;
                  position: relative;
                  box-sizing: border-box;
             }

             .navbar.scrolled {
                  background-color: #fff !important;
                  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                  padding: 10px 0;
                  width: 100vw;
                  max-width: 100vw;
                  left: 0;
                  right: 0;
                  position: relative;
                  box-sizing: border-box;
             }

             .nav-logo {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100%;
                  width: 100vw;
                  max-width: 100vw;
                  padding: 0;
                  left: 0;
                  right: 0;
                  box-sizing: border-box;
             }

             .nav-logo img {
                  max-width: 140px;
                  margin: 0 auto;
                  display: block;
                  transition: transform 0.3s ease-in-out;
             }

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

             .nav-btn {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  /* Increased gap for larger buttons */
                  border-radius: 22px;
                  font-family: 'Merriweather', sans-serif;
                  transition: all 0.3s;
                  padding: 10px 20px;
                  /* Increased padding for larger buttons */
                  font-size: 1.2em;
                  /* Increased font size for larger buttons */
                  background: #fff;
                  color: #525459;
                  border: 2px solid #525459;
                  text-align: center;
             }

             .nav-btn:hover {
                  background: #808080;
                  color: #fff;
                  box-shadow: 0 4px 16px rgba(128, 128, 128, 0.15);
                  transform: translateY(-2px);
                  border: 2px solid #808080;
             }

             .nav-btn-check:checked+.btn,
             .btn.active,
             .btn.show,
             .btn:first-child:active,
             :not(.btn-check)+.btn:active {
                  background: #808080;
                  color: #fff;
                  box-shadow: 0 4px 16px rgba(128, 128, 128, 0.15);
                  transform: translateY(-2px);
                  border: 2px solid #808080;
             }


             /* =========================
            BANNER
            ========================= */
             .banner-container {
                  width: 100%;
                  margin: 0 auto;
                  border-radius: 8px;
                  overflow: hidden;
                  box-shadow: 0 4px 6px rgba(4, 4, 4, 0.1);
             }

             .banner-container img {
                  max-width: 100%;
                  width: 100%;
                  height: auto;
                  display: block;
             }

             /* =========================
            SECTIONS
            ========================= */
             .new-section {
                  
               
                  
                  min-height: 400px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 20px;
                  width: 90%;
                  margin: 0 auto;
                  border-radius: 12px;
             }

             .new-section-content {
                  background: rgba(255, 255, 255, 0);

                  max-width: 1600px;
                  padding: 40px 30px;
                  text-align: justify;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
                  font-family: 'montserrat', sans-serif;
                  color: #333;
             }

             .new-section-content p {
                  font-size: 1.3rem;
                  line-height: 1.8;
                  margin-bottom: 20px;
             }

             .new-section-content p:last-child {
                  font-size: 1.6rem;
                  font-weight: bold;
                  color: #000;
             }

             /*EVENTO SECTION
                              ========================= */
             .evento-section {
                  padding: 60px 20px;
                  background: linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);
                  border-radius: 16px;
                  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
                  margin-bottom: 40px;
             }

             .evento-title {
                  font-size: 2.2rem;
                  font-weight: bold;
                  color: #222;
                  position: relative;
                  text-align: center;
                  letter-spacing: 1px;
                  margin-bottom: 10px;
             }

             .evento-divider {
                  width: 60px;
                  height: 4px;
                  background: linear-gradient(90deg, #f5b100 0%, #ffe066 100%);
                  margin: 12px auto 32px;
                  border-radius: 2px;
                  box-shadow: 0 2px 8px rgba(245, 177, 0, 0.12);
             }

             .evento-cards-container {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 32px;
                  justify-content: center;
                  align-items: stretch;
             }

             .evento-card {
                  background: #ffffff00;
                  border-radius: 14px;
                  padding: 28px 20px;
                  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
                  transition: transform 0.3s, box-shadow 0.3s;
                  width: 340px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  border: 1.5px solid #f5b10022;
                  position: relative;
             }

             .evento-card:hover {
                  transform: translateY(-10px) scale(1.03);
                  box-shadow: 0 8px 32px rgba(245, 177, 0, 0.18);
                  border-color: #f5b100;
             }

             .evento-img-wrapper {
                  width: 220px;
                  height: 220px;
                  margin: 0 auto 18px;
                  border-radius: 12px;
                  overflow: hidden;
                  background: linear-gradient(135deg, #fffbe6 0%, #f2f2f2 100%);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  box-shadow: 0 2px 12px rgba(245, 177, 0, 0.07);
                  border: 1px solid #f5b10033;
                  transition: box-shadow 0.3s;
             }

             .evento-card:hover .evento-img-wrapper {
                  box-shadow: 0 4px 24px rgba(245, 177, 0, 0.18);
             }

             .evento-img-wrapper img {
                  max-width: 90%;
                  max-height: 90%;
                  object-fit: contain;
                  transition: transform 0.3s;
             }

             .evento-card:hover .evento-img-wrapper img {
                  transform: scale(1.07) rotate(-2deg);
             }

             .evento-name {
                  font-size: 1.25rem;
                  font-weight: 700;
                  color: #f5b100;
                  margin-bottom: 10px;
                  text-align: center;
                  letter-spacing: 0.5px;
                  text-shadow: 0 1px 4px #fffbe6;
             }

             .evento-description {
                  color: #444;
                  font-size: 1.1rem;
                  text-align: center;
                  margin-bottom: 0;
                  line-height: 1.6;
             }

             @media (max-width: 900px) {
                  .evento-cards-container {
                       flex-direction: column;
                       gap: 24px;
                  }

                  .evento-card {
                       width: 100%;
                       max-width: 400px;
                       margin: 0 auto;
                  }

                  .evento-img-wrapper {
                       width: 160px;
                       height: 160px;
                  }
             }

             @media (max-width: 600px) {
                  .evento-section {
                       padding: 30px 6px;
                  }

                  .evento-title {
                       font-size: 1.3rem;
                  }

                  .evento-divider {
                       width: 36px;
                       height: 2px;
                  }

                  .evento-card {
                       padding: 16px 8px;
                  }

                  .evento-img-wrapper {
                       width: 100px;
                       height: 100px;
                  }

                  .evento-name {
                       font-size: 1rem;
                  }

                  .evento-description {
                       font-size: 0.9rem;
                  }
             }

             /* =========================        STATS SECTION
            ========================= */
             .stats {
                  padding: 60px 0;
                  background-color: #f9f9f9;
             }

             .stats-card {
                  position: relative;
                  height: 240px;
                  background: #fff;

                  padding: 60px 20px 20px 20px;
                  text-align: center;
                  border: 2px solid transparent;
                  overflow: visible;
                  transition: transform 0.3s, box-shadow 0.3s;
                  z-index: 1;
                  color: #7C7A57;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             }

             .stats-card::before {
                  content: "";
                  position: absolute;
                  inset: 0;
                  border: 3px solid #D1CB4D;

                  transform: scaleY(0);
                  transform-origin: top;
                  transition: transform 0.4s;
                  z-index: 0;
             }

             .stats-card:hover::before {
                  transform: scaleY(1);
             }

             .stats-card:hover {
                  transform: translateY(-8px) scale(1.03);
                  box-shadow: 0 8px 24px rgba(224, 195, 110, 0.18);
             }

             .stats-card i {
                  font-size: 2.8rem;
                  color: #D1CB4D;
                  margin-top: -40px;
                  margin-bottom: 10px;
                  background-color: #fff;
                  padding: 14px;
                  border-radius: 50%;
                  border: 2px solid #D1CB4D;
                  box-shadow: 0px 4px 20px #D1CB4D;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  width: 60px;
                  height: 60px;
                  position: relative;
                  z-index: 2;
             }

             .stats-card:hover i {
                  animation: glow 2s ease-in-out infinite;
             }

             @keyframes glow {
                  0% {
                       box-shadow: 0 0 10px rgba(255, 255, 0, 0);
                  }

                  50% {
                       box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
                  }

                  100% {
                       box-shadow: 0 0 10px rgba(255, 255, 0, 0);
                  }
             }

             .stats .purecounter {
                  font-size: 2.4rem;
                  font-weight: bold;
                  color: #7C7A57;
             }

             .stats p {
                  font-size: 1.1rem;
                  color: #7C7A57;
                  margin-top: 8px;
             }

             .stats-number {
                  font-size: 2.5rem;
                  font-weight: bold;
                  color: #666;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  gap: 2px;
             }

             .stats-number .purecounter {
                  display: inline-block;
             }

             /* =========================
            RESPONSIVE
            ========================= */
             @media (max-width: 768px) {
                  .nav-btn {
                       font-size: 13px;
                       padding: 6px 12px;
                  }

                  .stats-card {
                       height: 220px;
                       padding-top: 50px;
                  }

                  .stats-card i {
                       font-size: 2.2rem;
                       width: 50px;
                       height: 50px;
                       margin-top: -30px;
                  }

                  .stats .purecounter {
                       font-size: 2rem;
                  }

                  .stats p {
                       font-size: 1rem;
                  }
             }

             @media (max-width: 767px) {
                  .new-section {
                       width: 90%;
                       padding: 10px;
                       margin: 0 auto;
                      
                  }

                  .new-section-content {
                       padding: 15px;
                  }

                  .new-section-content p,
                  .new-section-content p:last-child {
                       font-size: 0.8rem;
                  }

                  img {
                       display: block;
                       margin: 0 auto;
                       width: 30%;
                       height: auto;
                  }

                  .nav-logo img {
                       display: block;
                       margin: 0 auto;
                       max-width: 100px;
                  }

                  .nav-logo {
                       padding: 10px 0;
                  }

                  .evento-img-wrapper {
                       width: 120px;
                       height: 120px;
                  }

                  .evento-title,
                  li,
                  p {
                       font-size: 0.8rem;
                  }

                  p {
                       font-size: 0.5rem;
                  }

                  @media (max-width: 767px) {
                       .nav-btn-group {
                            gap: 10px;
                            margin-top: 16px;
                            margin-bottom: 8px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-wrap: wrap;
                       }

                       .nav-btn {
                            font-size: 0.8em;
                            padding: 0.5em 1em;
                            border-radius: 20px;
                            border: 1px solid #000000;
                            background-color: #f9f9f9;
                            color: #000000;
                            text-align: center;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                            transition: all 0.3s ease-in-out;
                            cursor: pointer;
                       }

                       .nav-btn:hover,
                       .nav-btn:active,
                       .nav-btn:focus {
                            background-color: #4a4a4a !important;
                            color: #ffffff !important;
                            border-color: #4a4a4a !important;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                            transform: translateY(-1px);
                       }

                       .py-5 {
                            padding-top: 1rem !important;
                            padding-bottom: 1.5rem !important;
                       }
                  }

             }
        }