/* Al inicio del archivo, después de las variables */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global Styles */
:root {
  --primary-color: #0e36a1;
  --secondary-color: #0690d7;
  --accent-color: #0690d7;
  --dark-color: #212529;
  --light-color: #f8f9fa;
  --gray-color: #6c757d;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --danger-color: #f44336;
  --transition: all 0.3s ease;
  --gradient-bg: linear-gradient(to bottom, var(--primary-color), #fff);
}

/* Modificar el body */
body {
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--dark-color);
  overflow-x: hidden;
  padding-top: 76px;
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--secondary-color);
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  position: relative;
  font-weight: 700;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--gray-color);
  margin-bottom: 2rem;
}

/* Navbar */
.navbar {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--primary-color);
}

/* Logo adjustments */
.navbar-brand img {
  transition: var(--transition);
}

.navbar-brand:hover img {
  transform: scale(1.05);
}

.navbar-nav .nav-link {
  font-weight: 600;
  padding: 0.5rem 1rem;
  color: var(--dark-color);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--secondary-color);
}

/* Institutional Logos */
.institutional-logos {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.ucv-logo {
  height: 60px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.7));
  transition: var(--transition);
  /* Eliminamos el fondo blanco y el padding */
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

.fi-logo {
  height: 50px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.7));
  transition: var(--transition);
}

/* Modificar la clase .cefi-logo para aumentar el difuminado */
.cefi-logo {
  height: 50px;
  width: auto;
  //filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.7)) blur(1.5px);
  background: radial-gradient(circle, rgba(205, 203, 203, 0.7) 0%, rgba(6, 144, 215, 0) 70%);
  transition: var(--transition);
}

.institutional-logos img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.9));
}

@media (max-width: 767px) {
  .institutional-logos {
    justify-content: center;
  }

  .ucv-logo {
    height: 50px;
  }

  .fi-logo {
    height: 40px;
  }

  .cefi-logo {
    height: 40px;
  }
}

/* Logo Container and Background Styling */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.logo-bg-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 70%
  );
}

.hero-logo {
  max-width: 220px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.3));
}

.subtitle-text {
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 1rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile Logo Container */
.mobile-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-logo-container .logo-bg-circle {
  width: 150px;
  height: 150px;
}

.mobile-logo-container .hero-logo {
  max-width: 120px;
}

.mobile-logo-container .subtitle-text {
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* World Map Icon Styling */
.world-map-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hero Section */
.hero-section {
  background-color: var(--primary-color);
  background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 30px 0 120px; /* Reduced top padding to move content higher */
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to top, white, transparent);
}

.hero-section h1 {
  font-size: 3.2rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero-section .lead {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-section .btn {
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Course Cards */
.course-card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
  overflow: hidden;
}

.course-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid var(--secondary-color);
}

/* Inscription Cards */
.inscription-card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
  overflow: hidden;
  margin-bottom: 20px;
  background-color: white;
}

.inscription-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.inscription-card .card-body {
  padding: 1.5rem;
}

.inscription-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 5px 15px rgba(6, 144, 215, 0.3);
}

.upcoming-icon {
  background-color: var(--gray-color);
}

.upcoming-card {
  opacity: 0.8;
}

.icon-wrapper {
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

/* Course cards adjustments for language courses */
.course-card .icon-wrapper {
  margin-bottom: 1.5rem;
}

.course-card .icon-wrapper i,
.course-card .icon-wrapper .flag-icon {
  transition: var(--transition);
}

.course-card:hover .icon-wrapper i,
.course-card:hover .icon-wrapper .flag-icon {
  transform: scale(1.1);
}

/* Flag icons adjustments */
.flag-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: inline-block;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

/* Benefits Section */
.benefit-item {
  padding: 1.5rem;
  transition: var(--transition);
  border-radius: 10px;
}

.benefit-item:hover {
  transform: translateY(-5px);
  background-color: rgba(6, 144, 215, 0.05);
}

.benefit-item:hover h4 {
  color: var(--secondary-color);
}

/* Corregir los íconos para que se vean bien redondos */
.icon-circle,
.world-map-icon,
.inscription-icon,
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  box-shadow: 0 5px 15px rgba(6, 144, 215, 0.3);
}

/* Counter Section */
.counter-section {
  background-color: var(--primary-color);
  background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 80px 0;
  position: relative;
}

.counter-section::before,
.counter-section::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 70px;
}

.counter-section::before {
  top: 0;
  background: linear-gradient(to bottom, white, transparent);
}

.counter-section::after {
  bottom: 0;
  background: linear-gradient(to top, white, transparent);
}

.counter {
  padding: 1.5rem;
}

.counter-value {
  font-size: 3.2rem;
  font-weight: 700;
  margin: 1rem 0;
}

/* Testimonials */
.testimonial-item {
  padding: 2rem;
}

.testimonial-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 3px solid var(--secondary-color);
}

.testimonial-text {
  font-style: italic;
  margin: 1rem 0;
}

.rating {
  color: #ffc107;
}

/* Contact Section */
.contact-form {
  background-color: white;
  padding: 2.5rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-form .form-control {
  border-radius: 8px;
  padding: 12px 15px;
}

.icon-box {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(6, 144, 215, 0.3);
}

/* Contact info horizontal layout */
.contact-info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.contact-info-item {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .contact-info-container {
    flex-direction: column;
    align-items: center;
  }
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  transition: var(--transition);
  margin-right: 10px;
}

.social-links a:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
}

/* Newsletter Section */
.newsletter-section {
  background-color: var(--primary-color);
  background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  position: relative;
}

.newsletter-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(to bottom, white, transparent);
}

.newsletter-form .form-control {
  height: 50px;
  border-radius: 25px;
  padding: 0 20px;
  border: none;
}

.newsletter-form .btn {
  height: 50px;
  min-width: 120px;
  border-radius: 25px;
  font-weight: 600;
}

/* Footer */
.footer {
  background-color: var(--dark-color);
  position: relative;
  padding-top: 100px; /* Increase padding to accommodate the gradient */
}

.footer::before {
  content: none; /* Remove the gradient */
}

/* Ensure footer content is positioned correctly relative to the gradient */
.footer .container {
  position: relative;
  z-index: 1;
}

.footer h4,
.footer h5 {
  margin-bottom: 1.5rem;
  color: white;
}

.footer ul li {
  margin-bottom: 0.8rem;
}

.footer ul li a {
  color: rgba(255, 255, 255, 0.8);
  transition: var(--transition);
}

.footer ul li a:hover {
  color: white;
  padding-left: 5px;
}

.footer .social-links a {
  background-color: rgba(255, 255, 255, 0.15);
  margin-right: 10px;
}

.footer .social-links a:hover {
  background-color: var(--secondary-color);
}

.footer hr {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  box-shadow: 0 5px 15px rgba(6, 144, 215, 0.3);
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-3px);
}

/* About Page Styles */
.page-header {
  background-color: var(--primary-color);
  background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 120px 0 70px;
  margin-bottom: 50px;
  position: relative;
}

.page-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(to top, white, transparent);
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.breadcrumb-item a {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-item.active {
  color: white;
}

/* Feature boxes in About section */
.feature-box {
  background: white;
  border-radius: 15px;
  transition: var(--transition);
  height: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.feature-box i {
  color: var(--primary-color);
}

.value-item {
  padding: 1.5rem;
  transition: var(--transition);
  border-radius: 10px;
}

.value-item:hover {
  transform: translateY(-5px);
  background-color: rgba(6, 144, 215, 0.05);
}

.value-item:hover h4 {
  color: var(--secondary-color);
}

.team-member {
  background-color: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
}

.team-member:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid var(--secondary-color);
}

.team-member img {
  border: 3px solid var(--secondary-color);
}

.partner-logo {
  opacity: 0.7;
  transition: var(--transition);
  max-height: 80px;
}

.partner-logo:hover {
  opacity: 1;
}

/* Add custom Bootstrap color classes for our new colors */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.btn-primary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  border-radius: 30px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(6, 144, 215, 0.3);
}

.btn-outline-primary {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
  border-radius: 30px;
}

.btn-outline-primary:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(6, 144, 215, 0.3);
}

/* Responsive adjustments for hero section */
@media (max-width: 991px) {
  .hero-section {
    text-align: center;
    padding: 80px 0;
  }

  .hero-section .col-lg-7 {
    text-align: center;
  }

  .hero-section .d-flex {
    justify-content: center;
  }

  .institutional-logos {
    justify-content: center;
    margin-bottom: 2rem;
  }
}

/* Asegurar que los contenedores no excedan el ancho */
.container {
  max-width: 100%;
  overflow-x: hidden;
}

/* Asegurar que las imágenes y otros elementos multimedia no causen desbordamiento */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }

  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-section {
    padding: 60px 0;
  }

  .mobile-logo-container .logo-bg-circle {
    width: 120px;
    height: 120px;
  }

  .mobile-logo-container .hero-logo {
    max-width: 100px;
  }

  .mobile-logo-container .subtitle-text {
    font-size: 0.9rem;
  }

  .hero-section h1 {
    font-size: 1.8rem;
  }

  /* Botones más pequeños en móviles */
  .hero-section .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    margin: 5px;
  }

  .hero-section .d-flex {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Corregir las cajitas de Sobre CODEX en móviles */
  .feature-box {
    padding: 15px !important;
    height: auto !important;
    margin-bottom: 15px;
  }

  .feature-box h4 {
    font-size: 1.1rem;
  }

  .feature-box p {
    font-size: 0.9rem;
  }

  /* Ajustar tamaño de íconos en móviles */
  .feature-box i {
    font-size: 1.5rem !important;
  }

  .institutional-logos {
    justify-content: center;
    margin-bottom: 2rem;
  }
}

/* Adjust newsletter section to work without the form */
.newsletter-section {
  text-align: center;
  padding: 60px 0;
}

.newsletter-section .btn {
  margin-top: 20px;
  min-width: 200px;
}

/* Custom Threads Icon */
.fa-threads {
  position: relative;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 192 192' xmlns='http://www.w3.org/2000/svg' fill='white'%3E%3Cpath d='M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.4666 44.745C97.2805 44.7443 97.0947 44.7443 96.9089 44.7443C82.3457 44.7443 69.8593 51.1409 62.91 62.7807L75.3839 70.8545C80.4451 62.0297 89.8769 57.8647 96.9968 57.8647C97.1354 57.8647 97.274 57.8647 97.4119 57.8654C114.825 57.9674 124.885 67.9236 126.169 87.1702C120.792 85.8596 115.126 85.1743 109.298 85.1743C84.1899 85.1743 66.7555 100.971 66.7555 123.62C66.7555 146.805 85.5012 162.066 109.298 162.066C136.495 162.066 152.755 143.453 152.755 113.56C152.755 104.532 148.753 95.7141 141.537 88.9883ZM109.298 148.946C93.86 148.946 82.9378 139.084 82.9378 123.62C82.9378 108.156 93.86 98.2947 109.298 98.2947C111.427 98.2947 113.522 98.4362 115.582 98.7185C121.939 100.722 126.604 103.643 129.715 107.539C133.487 112.234 135.572 118.343 135.572 125.516C135.572 139.084 124.736 148.946 109.298 148.946Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Estilos para los modales de cursos al final del archivo */
.course-modal .modal-header {
  background-color: var(--primary-color);
  color: white;
}

.course-modal .modal-title {
  font-weight: 700;
}

.course-modal .modal-body {
  padding: 2rem;
}

.course-modal .course-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.8rem;
  box-shadow: 0 5px 15px rgba(6, 144, 215, 0.3);
}

.course-modal .nav-tabs {
  border-bottom: 2px solid var(--secondary-color);
  margin-bottom: 1.5rem;
}

.course-modal .nav-link {
  color: var(--dark-color);
  font-weight: 600;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
}

.course-modal .nav-link.active {
  color: var(--secondary-color);
  background-color: transparent;
  border-bottom: 3px solid var(--secondary-color);
}

.course-modal .tab-content {
  padding: 1rem 0;
}

.course-modal .price-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: var(--transition);
}

.course-modal .price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.course-modal .price-card .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

.course-modal .price-card .price-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.course-modal .price-card ul {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.course-modal .price-card ul li {
  margin-bottom: 0.5rem;
}

/* Ajustes adicionales para dispositivos móviles */
@media (max-width: 576px) {
  .course-modal .modal-body {
    padding: 1rem;
  }

  .course-modal .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }

  .course-modal h4 {
    font-size: 1.2rem;
  }

  .course-modal .card-title {
    font-size: 1.1rem;
  }

  .course-modal .card-text,
  .course-modal ul li {
    font-size: 0.9rem;
  }
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition: var(--transition);
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
}

.whatsapp-float i {
  animation: pulse-whatsapp 2s infinite;
}

@keyframes pulse-whatsapp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Ajuste responsive para el botón de WhatsApp */
@media (max-width: 767px) {
  .whatsapp-float {
    bottom: 80px;
    right: 15px;
    width: 55px;
    height: 55px;
    font-size: 1.8rem;
  }
}