@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

#albanil {
  top: 0%;
  left: -18.6%;
  position: absolute;
  transform: scale(0.9);
  filter: grayscale() contrast(40%);
  display: none;
}

html {
  overflow-y: scroll;
}

body {
  background-color: #f3f3f3;
  font-family: "Inter", sans-serif;
  cursor: default;
  zoom: 0.8;
}

body a {
  color: #212529;
}

h2 {
  margin-top: 5px;
}

h3,
h2,
u {
  font-weight: 600;
}

h2{
  font-size: 30px;
}

#tituloFuncional, #tituloTecnica {
  cursor: pointer;
  width: fit-content;
}

.pb-3 {
  font-size: 30px;
}

.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
  vertical-align: -6px !important;
}

.feature p,
.subtitulo {
  font-size: 19px;
}

.feature p {
  margin-bottom: 24px;
}

hr {
  margin-top: 0 !important;
}

.hrm {
  margin-top: 16px !important;
}

.feature {
  padding-top: 5px
}

h3 {
  font-size: 26px !important;
}

a:hover, #tituloFuncional:hover, #tituloTecnica:hover {
  color: #4946ce;
}

.MANUAL {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  background-color: #7ba885 !important;
}

.faq {
  background-color: #9291c9 !important;
}

#menup, #tituloFolleto button {
  position: relative;
  flex-direction: column;
  display: flex;
  justify-content: center;
  background-color: #d3d3e9;
  border-radius: 10px;
  line-height: normal;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  font-size: 20px !important;
  padding: 6px 12px 8px;
  text-decoration: none;
  border: none;
  color: #000000 !important;
  --bs-btn-font-size: 18px;
  font-weight: 600;
  width: 100%;
  height: 50px;
}

#tituloFolleto button {
  width: auto;
}

#menup:hover, #tituloFolleto button:hover {
  background-color: #4946ce;
  color: #e7e7e7 !important;
}

#menup:hover a {
  color: #e7e7e7 !important;
}

#menup:active, #tituloFolleto button:active {
  box-shadow: inset 0px 6px 5px rgba(49, 30, 49, 0.397);
}

#menup .btn, #tituloFolleto button {
  border: none;
  color: #000000 !important;
  --bs-btn-font-size: 18px;
  font-weight: 600;
}

a {
  text-decoration: none;
}

.btnM:hover {
  --bs-btn-hover-bg: #7ba885;
  color: black !important;
}

.btnD:hover {
  --bs-btn-hover-bg: #adaddf;
  color: black !important;
}

.feature-icon {
  transition: background-color 0.2s ease;
}
.feature-icon:hover{
  background-color: #4946ce !important;
}
.feature-icon.dark:hover{
  background-color: #d3d3e9 !important;
}
.links a:hover + a .feature-icon {
  background-color: #4946ce !important;
}

.bg-light {
  background-color: #e7e7e7 !important;
}

.priv:hover {
  --bs-btn-hover-bg: rgb(204, 204, 204);
  color: black !important;
}

#fondol {
  border: 1px;
  border-radius: 70px;
  background-color: #d3d3e9 !important;
  box-shadow: inset 0px 5px 6px rgba(49, 30, 49, 0.397)
}

.DOC {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  background-color: #bd5151 !important;
}

.subtitulo {
  position: relative;
  top: 7px;
  font-size: 20px !important;
  font-weight: 600;
}

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

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 0rem !important;
}



.icon-link > .bi {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  fill: currentcolor;
  transition: transform 0.25s ease-in-out;
}
.icon-link:hover > .bi {
  transform: translate(0.25rem);
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}

.text-shadow-1 {
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
}
.text-shadow-2 {
  text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}
.text-shadow-3 {
  text-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.feature-icon-small {
  width: 3rem;
  height: 3rem;
}
.fn15 {
  font-size: 2.5rem;
}

/* img {
  -webkit-filter: drop-shadow(5px 5px 5px #5f5f5f);
  filter: drop-shadow(-7px 5px 7px #222);
} */


img {
  width: 40%;
}

#fondol img {
  width: auto;
}

#process {
  width: 60%;
}

#logo {
 margin: 25px 0px;
}



html {
  height: -webkit-fill-available;
}

h2 span{
  transition: transform 0.1s;
}

#trianguloF, #trianguloT{
  display: inline-block;
}

.rotated{
  transform: rotate(180deg);
}

.rotated2 {
  transform: rotate(0deg);
}

.column {
  flex: 0;
  text-align: center;
}

.column a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.column a:hover {
  background-color: #ddd;
  color: black;
}


.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 10px 20px;
  z-index: 1000; /* Asegura que la barra esté sobre otros elementos */
}

.py-4{
  padding-top: 5rem !important;
}
.shadow{
  box-shadow: 0 5.9rem 15rem #4846ce50!important
}

.mt-4{
  margin-top: 0 !important;
}

.search-column {
  display: flex;
  align-items: center;
}

.search-input {
  padding: 8px;
  border: none;
  border-radius: 15px;
  width: 304px;
  border: 3px solid #4946ce;
  height: 54.38px;
  color: #4946ce;
}

.search-input::placeholder {
  color: #4946ce;
  opacity: 0.6;
}

.search-input:focus-visible{
  border: 4px solid #4946ce;
  outline: none;
}

.search-input:focus-visible::placeholder{
  opacity: 0.3;
}

.first-feature {
  margin-top: 0;
}

.second-column, .third-column {
  display: flex;
  align-items: center;
}

#scrollToTopBtn {
  opacity: 0;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #4946ce;
  background-color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  width: 75px;
  height: 75px;
  border-radius: 100px;
  font-size: x-large;
  box-shadow: 0px 0px 10px #4946ce;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease
}

#scrollToTopBtn:hover{
  color: white;
  background-color: #4946ce;
}

.funcionalResultsMessage, .tecnicaResultsMessage {
  display: none;
}

#tituloFolleto {
  display: flex;
  justify-content: space-between;
}

#tituloFolleto button {
  width: 215px;
  height: auto;
  align-items: center;
}
#tituloFolleto h2 {
  padding-bottom: 3px;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #4946ce #e7e7e7;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #e7e7e7;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #4946ce;
    border-radius: 0px;
    border: 0px none #ffffff;
  }


/* MODO OSCURO */

  body.dark {
    color: rgb(194, 194, 194);
  }

  body a.dark {
    color: rgb(194, 194, 194) !important;
  }

  #menup.dark, #tituloFolleto button.dark {
    color: #d3d3e9 !important;
    background: #2b2e30;
  }

  #menup.dark:hover, #tituloFolleto button.dark:hover {
    background: #d3d3e9;
    color: #2b2e30 !important;
  }

  .open-button.dark:hover,
  .cerrarSesion.dark:hover {
    background: #2b2e30;
    color: #d3d3e9;
  }

  .bg-white.dark {
    background-color: rgb(14, 14, 14) !important;
  }

  .bg-light.dark {
    background-color: #1f2123 !important;
  }

  .MANUAL.dark {
    background-color: #538a5fbb !important;
  }

  .faq.dark {
    background-color: #9291c9 !important;
  }

  .navbar.dark {
    background-color: #0e0e0e;
  }

  .DOC.dark {
    background-color: #bd5151bb !important;
  }

  .feature a.dark:hover, #tituloFuncional.dark:hover, #tituloTecnica.dark:hover {
    color: #d3d3e9 !important;
  }

  .links.dark a:hover + a .feature-icon {
    background-color: #d3d3e9 !important;
  }

  .feature h3 {
    margin-bottom: 0;
  }

  .links.dark a .feature-icon:hover  {
    color: red;
  }

  .emoji.dark {
    filter:brightness(0.05)
  }
  .shadow.dark{
    box-shadow: 0 5.9rem 15rem #d3d3e925!important
  }
  .search-input.dark {
    padding: 8px;
    border: none;
    border-radius: 15px;
    width: 304px;
    border: 3px solid #d3d3e9;
    height: 54.38px;
    color: #d3d3e9;
    background-color: #0e0e0e;
  }
  
  .search-input.dark::placeholder {
    color: #d3d3e9;
    opacity: 0.6;
  }
  
  .search-input.dark:focus-visible{
    border: 4px solid #d3d3e9;
    outline: none;
  }
  
  .search-input.dark:focus-visible::placeholder{
    opacity: 0.3;
  }
  

  .priv.dark:hover {
    --bs-btn-hover-bg: rgb(95, 95, 95);
  }

  #scrollToTopBtn.dark {
    background-color: #0e0e0e;
    color:  #d3d3e9;
    box-shadow: 0px 0px 10px #d3d3e9;
  }

  #scrollToTopBtn.dark:hover{
    color: #0e0e0e;
    background-color: #d3d3e9;
  }

  #process.dark {
    filter: invert(100);
  }

  /* ===== Scrollbar CSS ===== */
  /* Firefox */
  *.dark {
    scrollbar-width: auto;
    scrollbar-color: #d3d3e9 #1f2123 ;
  }

  /* Chrome, Edge, and Safari */
  *.dark::-webkit-scrollbar {
    width: 15px;
  }

  *.dark::-webkit-scrollbar-track {
    background: #1f2123;
  }

  *.dark::-webkit-scrollbar-thumb {
    background-color: #d3d3e9;
    border-radius: 0px;
    border: 0px none #ffffff;
  }

.icon-link > .bi {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  fill: currentcolor;
  transition: transform 0.25s ease-in-out;
}
.icon-link:hover > .bi {
  transform: translate(0.25rem);
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}

.text-shadow-1 {
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
}
.text-shadow-2 {
  text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}
.text-shadow-3 {
  text-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


/* img {
  -webkit-filter: drop-shadow(5px 5px 5px #5f5f5f);
  filter: drop-shadow(-7px 5px 7px #222);
} */

body {
}

html {
  height: -webkit-fill-available;
}

#featuresContainer {
  display: none;
}

.feature {
  display: none;
}

.feature.active {
  display: block;
}

.feature.active.p-hr {
  display: none;
}

.DOC.futuro, .MANUAL.futuro {
  background-color: #e7e7e7 !important;
  border: 2px solid #21252959;
}
.bi-cone-striped {
  color: #212529;
}
.feature.futuro:hover .feature-icon{
  background-color: #e7e7e7 !important;
}

.DOC.futuro.dark, .MANUAL.futuro.dark {
  border: 2px solid #c2c2c22f;
  background-color: #1f2123 !important;
}
.bi-cone-striped.dark {
  color: #c2c2c2;
  filter: brightness(1);
}
.feature.futuro.dark:hover .feature-icon{
  background-color: #1f2123 !important;
}

#fondol.dark {
  background-color: #2b2e30 !important;
  box-shadow: inset 0px 5px 6px rgb(0 0 0 / 33%)
}