/* ===================================================
   GLOBAL VARIABLES
=================================================== */

:root {

  /* COLORS */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  --dark: #0f172a;
  --dark-soft: #1e293b;

  --text: #1e293b;
  --text-light: #64748b;

  --white: #ffffff;

  --border: #e2e8f0;

  --bg-light: #f8fafc;

  /* SHADOWS */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.03);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 18px 45px rgba(0,0,0,0.12);

  /* RADIUS */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;

  /* TRANSITIONS */
  --transition: .35s ease;
}

/* ===================================================
   SECTION TITLES
=================================================== */

.portfolio-title,
.certifications-title {

  font-size: 2.6rem;
  font-weight: 800;

  color: var(--dark);

  margin-bottom: 12px;

  letter-spacing: -.5px;

  text-transform: uppercase;

  position: relative;
}

.portfolio-subtitle,
.certifications-subtitle {

  font-size: 1.08rem;

  color: var(--text-light);

  line-height: 1.8;

  max-width: 700px;

  margin: 0 auto 35px auto;

  font-weight: 400;
}

/* Decorative line */

.certifications-divider {

  width: 90px;
  height: 5px;

  border-radius: 999px;

  margin: 25px auto;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      #60a5fa
    );
}

/* ===================================================
   GRID LAYOUT
=================================================== */

.portfolio-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 28px;

  margin-bottom: 60px;
}

/* ===================================================
   PROJECT CARDS
=================================================== */

.project-card {

  background: var(--white);

  border: 1px solid rgba(226,232,240,.8);

  border-radius: var(--radius-md);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  position: relative;

  transition: var(--transition);

  box-shadow: var(--shadow-sm);

  backdrop-filter: blur(10px);
}

.project-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);

  border-color: rgba(37,99,235,.25);
}

/* IMAGE */

.project-card img {

  width: 100%;

  height: 190px;

  object-fit: cover;

  transition: transform .6s ease;

  cursor: pointer;
}

.project-card:hover img {

  transform: scale(1.04);
}

/* BODY */

.project-card-body {

  padding: 24px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;
}

/* TITLE */

.project-card-title {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 12px;

  line-height: 1.4;
}

/* DESCRIPTION */

.project-card-text {

  font-size: .95rem;

  color: var(--text-light);

  line-height: 1.7;

  margin-bottom: 18px;

  flex-grow: 1;
}

/* TECH STACK */

.project-tech {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 22px;
}

.project-tech span {

  background: rgba(37,99,235,.08);

  color: var(--primary);

  padding: 7px 12px;

  border-radius: 999px;

  font-size: .8rem;

  font-weight: 600;
}

/* ===================================================
   BUTTONS
=================================================== */

.project-btn-group {

  display: flex;

  gap: 10px;

  margin-top: auto;
}

/* PRIMARY */

.btn-visit {

  flex: 1;

  background: var(--primary);

  color: var(--white);

  padding: 12px;

  border-radius: var(--radius-sm);

  text-decoration: none;

  font-size: .9rem;

  font-weight: 600;

  text-align: center;

  transition: var(--transition);

  border: none;
}

.btn-visit:hover {

  background: var(--primary-hover);

  transform: translateY(-2px);

  color: white;

  text-decoration: none;
}

/* SECONDARY */

.btn-more {

  flex: 1;

  background: transparent;

  border: 1px solid var(--border);

  color: var(--dark);

  padding: 12px;

  border-radius: var(--radius-sm);

  font-size: .9rem;

  font-weight: 600;

  transition: var(--transition);

  cursor: pointer;
}

.btn-more:hover {

  background: var(--bg-light);

  border-color: var(--primary);

  color: var(--primary);
}

/* ===================================================
   BADGES
=================================================== */

.badge-container {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 22px;

  margin: 45px 0;
}

/* ===================================================
   CERTIFICATIONS SECTION
=================================================== */

.certifications-section {

  margin-top: 80px;

  padding: 70px 0;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fafc
    );
}

/* CAROUSEL WRAPPER */

.certifications-carousel-wrapper {

  overflow: hidden;

  border-radius: var(--radius-lg);

  background: white;

  box-shadow: var(--shadow-md);

  border: 1px solid rgba(226,232,240,.8);
}

/* IMAGES */

.carousel-item img {

  width: 100%;

  max-height: 500px;

  object-fit: contain;

  padding: 35px;

  background: white;

  transition: transform .5s ease;
}

.carousel-item:hover img {

  transform: scale(1.02);
}

/* CAPTION */

.carousel-caption {

  background:
    rgba(15,23,42,.88) !important;

  backdrop-filter: blur(12px);

  border-radius: 14px;

  padding: 14px 22px !important;

  bottom: 25px !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  width: auto !important;

  max-width: 85%;
}

.carousel-caption h6 {

  margin: 0;

  font-size: .95rem;

  font-weight: 600;

  line-height: 1.5;
}

/* INDICATORS */

.carousel-indicators {

  bottom: 12px !important;
}

.carousel-indicators li {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  border: none;

  background: #cbd5e1;

  opacity: 1;

  transition: var(--transition);
}

.carousel-indicators .active {

  background: var(--primary);

  transform: scale(1.25);
}

/* CONTROLS */

.carousel-control-prev,
.carousel-control-next {

  width: 8%;

  opacity: 0;

  transition: var(--transition);
}

.certifications-carousel-wrapper:hover
.carousel-control-prev,

.certifications-carousel-wrapper:hover
.carousel-control-next {

  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {

  background-color:
    rgba(37,99,235,.9);

  border-radius: 50%;

  padding: 24px;
}

/* ===================================================
   MODALS
=================================================== */

.modal-content {

  border: none;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-lg);
}

.modal-header {

  border-bottom: 1px solid var(--border);

  background: white;
}

.modal-footer {

  border-top: 1px solid var(--border);
}

/* ===================================================
   FOOTER
=================================================== */

footer {

  background: var(--dark);

  color: white;

  text-align: center;

  padding: 28px;

  margin-top: 60px;

  font-size: .92rem;
}

/* ===================================================
   RESPONSIVE
=================================================== */

@media (max-width: 992px) {

  .portfolio-title,
  .certifications-title {

    font-size: 2.1rem;
  }

  .carousel-item img {

    max-height: 420px;
  }
}

@media (max-width: 768px) {

  .portfolio-title,
  .certifications-title {

    font-size: 1.8rem;
  }

  .portfolio-subtitle,
  .certifications-subtitle {

    font-size: 1rem;
  }

  .project-btn-group {

    flex-direction: column;
  }


@media (max-width: 576px) {

  .portfolio-grid {

    gap: 20px;
  }

  .project-card-body {

    padding: 18px;
  }


  

  /* ===================================================
   CERTIFICACIONES
=================================================== */

.certifications-section{
    margin-top: 80px;
    padding: 70px 0;
}

.certifications-title{
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.certifications-subtitle{
    color: #64748b;
    max-width: 700px;
    margin: auto;
    margin-bottom: 25px;
    line-height: 1.8;
}

.certifications-divider{
    width: 80px;
    height: 5px;
    border-radius: 999px;
    margin: 30px auto;
    background: linear-gradient(90deg,#2563eb,#60a5fa);
}

/* GRID */

.certifications-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 30px;
    margin-top: 50px;
}

/* CARD */

.certificate-card{
    background: white;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.35s ease;
    padding: 18px;
    text-align: center;
}

.certificate-card:hover{
    transform: translateY(-10px);
}

/* IMAGE */

.certificate-card img{
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #f8fafc;
    border-radius: 14px;
    padding: 10px;
}

/* TITLE */

.certificate-card h6{
    margin-top: 18px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.5;
}

/* RESPONSIVE */

@media(max-width:768px){

    .certifications-title{
        font-size: 2rem;
    }

    .certificate-card img{
        height: 180px;
    }

}



}
}