:root{
  --background: hsl(300, 3%, 7%);
  --foreground: hsl(240, 7%, 97%);
      --primary: #EB178E;
      --secondary: #20CCF1;
  --muted: hsl(180, 2%, 10%);
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--foreground);
  color: var(--foreground);
}

html {
  scroll-behavior: smooth;
}

  .scroll-margin{
  padding-top: 15vh; /* TO AVOID NAVBAR OVERFLOW. ALL SECTIONS MUST HAVE IT */
}


.navbar {
  background-color: var(--foreground);
      box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--background);
}

.navbar .nav-link:hover {
  color: var(--primary);
}

.btn-custom {
  background-color: var(--primary) !important;
  color: var(--foreground);
  border: none;
  font-weight: 600; /* fw-semibold */
}

.btn-custom:hover {
  background-color: var(--secondary) !important;
  color: var(--foreground);
}
.btn-form {
  background-color: var(--secondary) !important;
  color: var(--foreground);
  border: none;
}
.btn-form:hover {
  filter: brightness(85%);
  color: white !important;
}

/* Card styles */
.card {
  transition: transform 0.3s ease; /* smooth transition */
}

.card:hover:not(.no-hover) {
  transform: scale(1.05); /* increase size 5% */
}

/* Footer styles */
footer {
  background-image: linear-gradient(
    to right,
    /* Gradient from left to right */
    rgba(255, 255, 255, 0.9) 0%,        
    rgba(235, 23, 142, 0.05) 10%,
    #EB178E 100%                       
  );

  
  color: var(--foreground);
  padding: 20px 40px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left .footer-link {
  display: inline-block;
  background-color: var(--muted);
  color: var(--foreground);
  margin-right: 20px;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-left .footer-link:hover {
  background-color: var(--secondary);
  color: var(--background);
}

.footer-right a {
  padding: 0;
  border-radius: 0;
  margin-left: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.footer-right .footer-icon {
  font-size: 1.5rem;
  color: var(--foreground);
  transition: color 0.3s ease;
}

.footer-right a:hover .footer-icon {
  color: var(--secondary);
}
.footer-link-text {
  font-size: 0.7em;
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link-text:hover {
  color: var(--secondary);
}

/* Button styling */
.form-btn {
  background-color: var(--primary);
  border-color: var(--primary);
  color: rgb(255, 255, 255);
}

.form-btn:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: rgb(255, 255, 255);

}

.event-btn-container{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 10px;
}

.event-btn{
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
}

.event-btn:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: white;
}

.event-filter-btn.active {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: white;
  transform: scale(1.15);
}

.event-filter-btn {
  display: inline-block;
  transition: 
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  will-change: transform, background-color, border-color;
}

.event-future .card {
  display: block;
}

.event-past {
  display: block;
}

/*Language button styling*/
.btn-custom.dropdown-toggle.show {
  background-color: var(--secondary);
  color: white;
}

/* Event button styling */
.bg-aisc-event {
  background-color: #20ccf1;
  color: white;
}

/* Team cards */
.team-box {
  transition: transform 0.3s ease; /* smooth transition */
}

.team-box:hover:not(.no-hover) {
  transform: scale(1.05); /* increase size 5% */
}

/* Saber más card */
.card-body.position-relative {
  position: relative;
}

.card-more-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: var(--primary);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.card:hover .card-more-badge {
  background-color: var(--secondary);
}

form label {
  color: black;
}
/* About us */
.story-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 3rem;
}
.story-block.reverse {
  flex-direction: row-reverse;
}
.story-block p {
  color:black;
}
.story-block h3 {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1rem;
}
.story-block h5 {
  color: black;
  font-weight: 600;
  margin-bottom: 1rem;
}
.story-block a {
  text-decoration: none;
    color:var(--primary);
}
.story-block a:hover {
  color: var(--secondary);
}

.story-content {
  flex: 1;
  min-width: 260px;
  margin-right: 2rem;
}

.story-image {
  flex: 1;
  min-width: 260px;
}

.story-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.role-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.role-card h5 { color: var(--muted); font-weight: 700; }
.role-card ul { padding-left: 1.1rem; color: #555; }
.role-card .btn { background-color: var(--primary); border-color: var(--primary); }
.role-card .btn:hover { background-color: var(--secondary); border-color: var(--secondary); }

.role-icon-pink {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(235,23,142,.15), rgba(32,204,241,.15));
  color: var(--primary); font-size: 1.25rem;
}

.role-icon-blue {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(235,23,142,.15), rgba(32,204,241,.15));
  color: var(--secondary); font-size: 1.25rem;
}

.values-tabs-section ul.nav-pills .nav-link {
  text-align: left;
  font-weight: 600;
  color: black;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.values-tabs-section ul.nav-pills .nav-link.active {
  background-color: var(--primary);
  color: var(--foreground);
}

.values-tabs-section ul.nav-pills .nav-link:not(.active):hover {
  color: var(--primary);
  cursor: pointer;
}

.values-tabs-section .tab-pane img {
  max-height: 300px;
  object-fit: cover;
}

.values-tabs-section .tab-content p {
  font-size: 1.1rem;
  color: black;
  transition: color 0.2s ease;
}


/* Project styling */
.project-btn-container{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 10px;
}

.project-btn{
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
}

.project-btn:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: white;
}

.project-description {
  overflow: hidden;
  height: 90px;
}

/* Project button styling */
.bg-aisc-project {
  background-color: #20CCF1;
  color: white;
}

/* Horizontal card tweaks */
.horizontal-card {
  height: 400px !important;
  border-radius: 10px;
  overflow: hidden;
}
.horizontal-card .row {
  height: 100%;
}

.horizontal-card .img-side {
  height: 100%;
}

.horizontal-card .img-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  /* border-radius: 0 .5rem .5rem 0; */
}

/* If your Bootstrap doesn't expose the CSS var above, fallback: */
.horizontal-card .img-side img {
  border-radius: 0 .5rem .5rem 0; 
}

/* Animación de tarjetas */
.card-project {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 10px !important; /* Bordes redondeados */
  overflow: hidden; /* Asegura que la imagen respete el borde */
  height: 100%; /* Ocupa todo el espacio de la columna */
}

.card-project.hidden {
  /* Ocultar la tarjeta de forma elegante */
  opacity: 0;
  height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: scale(0.9);
  pointer-events: none; /* No permite clics cuando está oculta */
}

/* Asegura que el enlace dentro de la tarjeta ocupe todo el espacio */
.card-project a {
  display: flex;
  height: 100%;
}

.category-badge {
  display: inline-block;          /* se colocan uno al lado del otro */
  padding: 0.35rem 0.75rem;       /* tamaño tipo botón */
  margin: 0.2rem;                 /* separa los botones entre sí */
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background-color: #495057;
  cursor: default;                /* no parece clicable */
  user-select: none;              /* evita seleccionar el texto */
  text-transform: capitalize;     /* primera letra en mayúscula */
  transition: transform 0.1s ease-in-out;
}

.category-badge:hover {
  transform: scale(1.05);         /* ligera animación al pasar el ratón */
}

/* 🎨 Colores distintos según la categoría */
.category-ai        { background-color: #0d47a1; } /* azul oscuro */
.category-climate   { background-color: #2e7d32; } /* verde */
.category-health    { background-color: #d32f2f; } /* rojo */
.category-education { background-color: #f9a825; } /* amarillo */
.category-vision    { background-color: #0288d1; } /* azul claro */
.category-nlp       { background-color: #6a1b9a; } /* morado */
.category-robotics  { background-color: #00897b; } /* turquesa */
.category-ethics    { background-color: #5d4037; } /* marrón */

/* color por defecto si no coincide con ninguno */
.category-badge:not([class*="category-"]) {
  background-color: #757575; /* gris */
}

.upcoming-badge {     /* Indicator in card that the event is future */
    color: #EB178E !important;
    background: linear-gradient(135deg, rgba(235, 23, 142, .15), rgba(32, 204, 241, .15)) !important;
  margin: 10px;
}

.filter-button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background-color: #ffffffff;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

button.active {
  background-color: #EB178E;
  color: white;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.logo-spinner-container {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.loader-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  z-index: 2;
}

.logo-spinner-ring {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid rgba(235, 23, 142, 0.1);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  z-index: 1;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: var(--primary);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}