a,p,h1,h2,h3,h4,h5,h6,button,span,input,select,option,div,textarea,body{
  font-family: 'Poppins', sans-serif !important;
  /* color: #0e141b ; */
}

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

a:hover{
  opacity: 0.7;
}

.text-upper{
  text-transform: uppercase;
}

body{
  background-color: #212529 !important;
}

.justify{
      text-align: justify;
}

.btn-close{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
}

.btn-close-2{
  right: 10px !important;
    top: 10px !important;
}

.centrar-vertical{
  display: flex;
   align-items: center;
}

.navbar-menu{
      justify-content: right;
}

.main{}

.carousel-item{
  min-height: 100vh;
}

.suspensivos{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: #0000001a;
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em #0000001a,
    inset 0 0.125em 0.5em #00000026;
}
.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}
.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle {
  z-index: 1500;
}
.bd-mode-toggle .bi {
  width: 1em;
  height: 1em;
}
.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}


/* LOADER */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #212529; /* azul Bootstrap */
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loader.hidden {
opacity: 0;
visibility: hidden;
}

#typewriter {
font-size: 2rem;
color: white;
border-right: 2px solid white;
white-space: nowrap;
overflow: hidden;
animation: blink 0.8s step-end infinite alternate;
}

@keyframes blink {
50% {
  border-color: transparent;
}
}


/* <!-- GRADIENT TEXT --> */

.gradient-text {
background: linear-gradient(90deg, #007bff, #00c6ff, #007bff);
background-size: 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientMove 4s ease infinite;
}

@keyframes gradientMove {
0% { background-position: 0% }
100% { background-position: 200% }
}


/* <!-- GRADIENT BORDER --> */

.gradient-border {
  position: relative;
  display: inline-block;
  border-radius: 15px;
  padding: 4px; /* grosor del borde */
  background: linear-gradient(90deg, #007bff, #00c6ff, #007bff);
  background-size: 200%;
  animation: gradientMove 4s ease infinite;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px; /* igual que el padding del contenedor */
  background: linear-gradient(90deg, #007bff, #00c6ff, #007bff);
  background-size: 200%;
  animation: gradientMove 4s ease infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
}

.gradient-border img {
  position: relative;
  display: block;
  border-radius: 11px; /* un poco menos que el contenedor */
  width: 100%;
  height: auto;
  background-color: #fff; /* o transparente si lo prefieres */
  z-index: 1;
}

@keyframes gradientMove {
  0% { background-position: 0% }
  100% { background-position: 200% }
}



/* imagen ampliada */
.img-big{
  max-height: 80vh;
      max-width: fit-content;
}
.modal-img{
  max-width: fit-content;
}
.modal-img-center{
  justify-content: center !important;
}

/* <!-- MOVIMIENTO Y SOMBRA A CARDS --> */

  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }

  /* // <!-- EFECTO FADE IN --> */
  .fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
  }

  .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
  }



/* EFECTO CURSOR */
  .spark {
    position: fixed;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #007bff, #00c6ff, transparent);
    border-radius: 50%;
    pointer-events: none;
    animation: burn 0.6s linear forwards;
  }

  @keyframes burn {
    0% {
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(var(--x), var(--y)) scale(0);
      opacity: 0;
    }
  }

  /* <!--  Cursor Sparkles Effect --> */

    .spark-index {
      position: fixed;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      animation: spark-move 600ms ease-out forwards;
    }

    @keyframes spark-move {
      from {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      to {
        transform: translateY(-30px) scale(0);
        opacity: 0;
      }
    }



/* MODAL IMAGEN */

.w-90{
      width: 90%;
}


/* FONDOS */
.bg-1{
  background-position: center;
  background-size: cover;
  background-image: url('../img/BG-1.png') !important;
}

.bg-2{
  background-position: center;
  background-size: cover;
  background-image: url('../img/BG-3.png') !important;
}

.bg-filter{
  --bs-bg-opacity: 1;
background-color: rgb(0 0 0 / 60%) !important;
width: 100%;
height: 100%;
position: relative;
}

.border-index{
  border: 2px solid white;
}

.carousel-item{
  /* z-index: 10; /* sobre el fondo */ */
}

/* Fondo degradado animado para el slide */
.bg-carousel-item {
  position: relative;
  height: 100vh; /* ocupa toda la pantalla */
  overflow: hidden;
  /* background: linear-gradient(135deg, #001f41, #002631, #30007d); */
  /* background: linear-gradient(135deg, #0054b1, #003a4b, #4600b7); */
      background: linear-gradient(135deg, #0054b1, #005973, #4600b7, #b7005d, #b70000);
  background-size: 600% 600%;
  animation: gradientBG 20s ease infinite;
}

/* Animación del degradado */
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Aseguramos que la capa de logos flotantes esté sobre el fondo */
#floating-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* debajo del contenido */
  overflow: hidden;
}


.text-title-index{
  font-weight: revert;
  margin: 0px;
}

.bg-profile{
    background-image: url("../img/sdkljnvbsdkuj.png")
}


.portfolio-img{
  /* z-index: 9999999; */
}

/* === FOLDER NAVBAR (versión combinada sin duplicados) === */
.folder-navbar {
  background-color: transparent !important;
  border: none;
  z-index: 50;
}

/* La segunda definición se mantiene, pero SIN duplicar la primera */
.folder-navbar {
  background: #fff;
  /* box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); */
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* === FOLDER CONTAINER (sin duplicados) === */
.folder-container {
  position: relative;
  background-color: #FFE9A2;
  border-radius: 0.8rem 0.8rem 0 0;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}

/* Esta definición ya estaba repetida, así se conserva solo una */
.folder-container {
  position: relative;
}

/* === FOLDER TAB === */
.folder-tab {
  position: fixed;
  bottom: 30px;
  left: 10%;
  width: 120px;
  height: 20px;
  background-color: #FFD45A;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

@media (min-width: 992px) {
  .folder-tab {
    z-index: 1;
    left: 3%;
    position: absolute;
    width: 310px;
    height: 30px;
    bottom: 30px;
    border-radius: 10px 10px 0 0;
  }
}

/* === FOLDER MENU === */
.folder-menu {
  z-index: -1;
  position: absolute;
  bottom: 58%;
  left: 7.5%;
  width: 85%;
  background: #f8f9fa;
  /* box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15); */
  overflow: hidden;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.4s ease;
  background: transparent;
}

.folder-menu.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* === FOLDER LINKS === */
.folder-link {
  display: block;
  padding: 14px;
  text-align: center;
  color: #000;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  border-top: 1px solid #cbcbcb;
}

.folder-link:hover {
  background: #eaeaea;
}

/* === FOLDER NAVBAR OPEN EFFECT === */
.folder-navbar.open {
  /* transform: translateY(-90px); */
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.2);
}

/* === TOGGLE === */
.folder-toggle {
  cursor: pointer;
}
/* HOJAS DEL FOLDER */
.hoja-izq {
  opacity: 1 !important;
  transform: translateX(-6px);
  /* box-shadow: 0 -3px 8px rgba(0,0,0,0.12); */
      box-shadow: 0 0px 2px 2px rgba(0, 0, 0, 0.12);
  position: relative;
  /* z-index: 2; */

  background: #ffffff;
    height: 110px;
    bottom: -58px;
    z-index: 1;
}

.hoja-der {
  opacity: 1 !important;
  background: #ffffff;
  transform: translateX(6px);
  /* box-shadow: 0 -3px 8px rgba(0,0,0,0.12); */
      box-shadow: 0 0px 2px 2px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}

/* Suave animación cuando aparecen */
.folder-menu.active .hoja-izq,
.folder-menu.active .hoja-der {
  transition: transform 0.35s ease-out, box-shadow 0.3s ease;
}