/* --- Variables CSS --- */
:root {
  --primary-color: #009dff;
  --primary-color-dark: #007acc;
  --secondary-color: #333;
  --text-color: #222;
  --text-color-light: #555;
  --bg-color: #fff;
  --light-gray: #f8f9fa;
  --hero-blue-globe: #007bff;
  --border-radius-sm: 8px;
  --border-radius-md: 50px;
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --transition-speed: 0.3s ease;
  --navbar-height: 80px;
}

/* --- Reset Básico y Estilos Globales --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--bg-color); color: var(--text-color); line-height: 1.6; overflow-x: hidden; /* Prevenir scroll horizontal por animaciones */ }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: var(--text-color); transition: color var(--transition-speed); }
a:hover { color: var(--primary-color); }

/* --- Navbar --- */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 0 5%; background-color: var(--bg-color); position: sticky; top: 0; z-index: 1000; height: var(--navbar-height); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.logo img { height: 66px; transition: transform 0.2s ease-out; }
.logo a:hover img { transform: scale(1.05); }
.menu { display: flex; align-items: center; gap: 30px; }
.menu a { font-weight: 500; font-size: 15px; color: #444; padding: 8px 0; position: relative; }
.menu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-color);
  transition: width 0.3s ease-in-out;
}
.menu a:hover::after { width: 100%; }
.menu a:hover { color: var(--primary-color); }


/* --- Botones --- */
.btn { display: inline-block; padding: 10px 28px; border-radius: var(--border-radius-md); font-weight: 600; font-size: 15px; transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed); border: 2px solid transparent; text-align: center; }
.btn-header { background-color: var(--primary-color); color: var(--bg-color) !important; padding: 10px 24px; width: 150px; min-width: 150px; }
.btn-header:hover { background-color: var(--primary-color-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.btn-primary { background-color: var(--primary-color); color: var(--bg-color); padding: 12px 30px; }
.btn-primary:hover { background-color: var(--primary-color-dark); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 123, 255, 0.35); }
.btn-outline { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; padding: 12px 30px; }
.btn-outline:hover { background-color: var(--primary-color); color: var(--bg-color); transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); }

/* --- Keyframes para Animaciones --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slowPulse {
  0% { transform: translateY(-50%) scale(1); opacity: 0.15; }
  50% { transform: translateY(-50%) scale(1.03); opacity: 0.18; }
  100% { transform: translateY(-50%) scale(1); opacity: 0.15; }
}
@keyframes subtleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- Hero Section - Adaptado para Carrusel --- */
.hero { background-color: var(--bg-color); min-height: calc(100vh - var(--navbar-height)); display: flex; align-items: stretch; position: relative; overflow: hidden; padding-top: 40px; }
.hero-background-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.blue-globe { position: absolute; width: 700px; height: 700px; background-color: var(--hero-blue-globe); border-radius: 50%; top: 50%; right: -250px; transform: translateY(-50%); opacity: 0; animation: slowPulse 10s infinite alternate ease-in-out 0.5s forwards, fadeIn 1s ease-out 0.5s forwards; }
.dotted-pattern { position: absolute; width: 200px; height: 150px; background-image: radial-gradient(circle, rgba(0,123,255,0.3) 1.5px, transparent 1.5px); background-size: 15px 15px; bottom: 10%; right: 5%; opacity: 0; animation: fadeIn 1s ease-out 0.8s forwards; }

.hero .carousel-container { /* Renombrado de .container a .carousel-container para claridad */
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  height: 100%; /* Asegura que el contenedor del carrusel ocupe la altura disponible */
  display: flex; /* Para centrar verticalmente el carrusel-inner si es necesario */
  align-items: center; /* Centrar items dentro del contenedor del carrusel */
}

.carousel-inner {
  position: relative; /* Para posicionar los items absolutamente dentro */
  width: 100%;
  height: 100%; /* Ocupa la altura del carousel-container */
  overflow: hidden;
  min-height: 450px; /* Altura mínima para asegurar visibilidad */
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out; /* Transición de fade */
  display: flex; /* Para que hero-content sea un flex item */
  align-items: stretch; /* Estirar el hero-content para llenar la altura */
}

.carousel-item.active {
  opacity: 1;
  visibility: visible;
}

/* El contenido interno de cada slide (hero-content) */
.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  padding: 0 20px; /* Padding interno para el contenido, si no se hace en .container */
}

.hero-text { flex-basis: 48%; display: flex; flex-direction: column; justify-content: center; padding-right: 30px; }
.hero-text h4 { font-size: 16px; font-weight: 600; color: var(--secondary-color); margin-bottom: 10px; text-transform: uppercase; /* animation: fadeInUp 0.6s ease-out 0.2s backwards; */ }
.hero-text h1 { font-size: clamp(38px, 5vw, 54px); font-weight: 700; color: var(--text-color); line-height: 1.15; margin-bottom: 25px; /* animation: fadeInUp 0.6s ease-out 0.4s backwards; */ }
.hero-text p { font-size: 16px; color: var(--text-color-light); margin-bottom: 35px; max-width: 480px; /* animation: fadeInUp 0.6s ease-out 0.6s backwards; */ }
.buttons { display: flex; gap: 15px; flex-wrap: wrap; /* animation: fadeInUp 0.6s ease-out 0.8s backwards; */ }
.hero-image-area { flex-basis: 52%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.person-image { max-height: 100%; width: auto; object-fit: contain; object-position: bottom center; /* animation: fadeInRight 0.8s ease-out 0.5s backwards; */ }

/* NOTA: He comentado las animaciones individuales (fadeInUp, fadeInRight) dentro de .hero-text y .person-image.
   En un carrusel de fade, animar cada elemento individualmente en cada slide puede ser redundante o generar
   problemas visuales. La transición principal del slide (opacity) suele ser suficiente.
   Si quieres que cada elemento aparezca animado en cada slide, tendrías que re-activar las animaciones
   cuando el slide se vuelve 'active' vía JavaScript, lo cual es más complejo.
*/


/* --- Controles del Carrusel (Flechas) --- */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50; /* Por encima de las slides */
  transition: background-color var(--transition-speed);
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.5);
}

.carousel-control-prev {
  left: 20px;
}

.carousel-control-next {
  right: 20px;
}

.arrow {
  display: block;
  width: 12px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 3px;
}

.right-arrow {
  transform: rotate(-45deg);
  margin-right: -4px; /* Ajuste visual */
}

.left-arrow {
  transform: rotate(135deg);
  margin-left: -4px; /* Ajuste visual */
}

/* --- Indicadores del Carrusel (Puntos) --- */
.carousel-indicators {
  position: absolute;
  bottom: 25px; /* Ajusta la posición de los puntos */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 50;
}

.indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.indicator-dot.active,
.indicator-dot:hover {
  background-color: var(--primary-color);
  transform: scale(1.2);
}


/* --- Icono Flotante de Chat --- */
.floating-chat-icon { position: fixed; bottom: 25px; right: 25px; z-index: 999; background-color: white; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform var(--transition-speed); padding: 5px; animation: subtleBob 2.5s infinite ease-in-out 2s; }
.floating-chat-icon:hover { transform: scale(1.1); animation-play-state: paused; }
.floating-chat-icon img { width: 55px; height: 55px; border-radius: 50%; }

/* --- Contenedor General --- */
.container { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.eyebrow-title { font-size: 14px; font-weight: 600; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Animaciones On-Scroll --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: var(--animation-delay, 0s); /* Permite delays personalizados inline */
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Variaciones para diferentes direcciones */
.animate-on-scroll.fade-in-left.is-visible { transform: translateX(0); }
.animate-on-scroll.fade-in-left { transform: translateX(-30px); }

.animate-on-scroll.fade-in-right.is-visible { transform: translateX(0); }
.animate-on-scroll.fade-in-right { transform: translateX(30px); }


/* --- Services Section --- */
.services-section { padding: 80px 0; background-color: var(--bg-color); }
.section-header-eyebrow { margin-bottom: 20px; }

.services-grid-layout { display: flex; flex-direction: column; gap: 50px; }
.services-row-top { display: flex; align-items: center; gap: 40px; }
.services-main-intro { flex: 1 1 55%; max-width: 600px; }
.services-main-intro h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: var(--text-color); line-height: 1.2; margin-bottom: 15px; }
.services-main-intro .section-intro { font-size: 16px; color: var(--text-color-light); line-height: 1.7; }
.services-main-illustration { flex: 1 1 45%; display: flex; justify-content: center; align-items: center; }
.service-illustration-img { max-width: 100%; max-height: 300px; object-fit: contain; }

.services-row-bottom { display: flex; align-items: flex-start; gap: 60px; }
.services-subcolumn-left { flex: 1; display: flex; flex-direction: column; gap: 30px; }
.services-subcolumn-right { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }

.service-item { display: flex; align-items: flex-start; gap: 20px; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; border-radius: var(--border-radius-sm); padding: 15px; margin: -15px; /* Compensar padding para mantener layout */}
.service-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.07); }
.service-icon-wrapper { background-color: var(--primary-color); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 12px; transition: transform 0.3s ease-out; }
.service-icon-wrapper:hover { transform: scale(1.1) rotate(10deg); }
.service-icon-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.service-text-content h3 { font-size: 20px; font-weight: 600; color: var(--text-color); margin-bottom: 8px; }
.service-text-content p { font-size: 15px; color: var(--text-color-light); line-height: 1.6; }
.services-cta-button { margin-top: 10px; }


/* --- About Section --- */
.about-section {
  padding: 80px 0;
  background-color: var(--light-gray);
}
.about-content {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}
.about-mission, .about-vision {
  flex: 1;
}
.about-section h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}
.about-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--primary-color);
}
.mission-card, .vision-card {
  background-color: var(--bg-color);
  border-radius: var(--border-radius-sm);
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.mission-card:hover, .vision-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.mission-icon, .vision-icon {
  width: 70px;
  height: 70px;
  background-color: var(--primary-color); /* Cambiado para consistencia con iconos de servicios */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 15px; /* Ajustar si el icono es PNG con fondo */
  transition: transform 0.3s ease-out;
}
.mission-icon:hover, .vision-icon:hover {
  transform: scale(1.1);
}
.mission-icon img, .vision-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Si los iconos son oscuros y el fondo es el primario */
}
.mission-text p, .vision-text p {
  font-size: 16px;
  color: var(--text-color-light);
  line-height: 1.7;
  margin-bottom: 20px; /* Espacio para la imagen */
}
.card-illustration {
    margin-top: auto; /* Empuja la imagen hacia abajo */
    max-height: 150px; /* Ajusta según necesidad */
    width: auto;
    align-self: center; /* Centra la imagen si no ocupa todo el ancho */
    border-radius: var(--border-radius-sm);
}

/* --- Chatbot --- */
.chatbot-container {
  position: fixed;
  bottom: 100px; /* Encima del icono flotante de chat */
  right: 25px;
  width: 350px;
  max-width: 90vw;
  height: 500px;
  max-height: 70vh;
  background-color: var(--bg-color);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  z-index: 998; /* Debajo del icono de chat cuando está cerrado, pero encima de otro contenido */
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0s 0.3s;
}

.chatbot-container.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0s 0s;
}

.chatbot-header {
  background-color: var(--primary-color);
  color: var(--bg-color);
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: var(--border-radius-sm);
  border-top-right-radius: var(--border-radius-sm);
}

.chatbot-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.chatbot-close-btn {
  background: none;
  border: none;
  color: var(--bg-color);
  font-size: 24px;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}
.chatbot-close-btn:hover {
  opacity: 0.8;
}

.chatbot-messages {
  flex-grow: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatbot-message {
  padding: 10px 15px;
  border-radius: var(--border-radius-md); /* Usamos el border-radius grande para burbujas */
  max-width: 80%;
  line-height: 1.4;
  font-size: 14px;
  word-wrap: break-word;
}

.chatbot-message.bot {
  background-color: var(--light-gray);
  color: var(--text-color);
  align-self: flex-start;
  border-bottom-left-radius: var(--border-radius-sm); /* Para que no sea tan redondo en una esquina */
}

.chatbot-message.user {
  background-color: var(--primary-color);
  color: var(--bg-color);
  align-self: flex-end;
  border-bottom-right-radius: var(--border-radius-sm);
}

.chatbot-input-area {
  padding: 15px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chatbot-option-button {
  background-color: var(--bg-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 10px 15px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.chatbot-option-button:hover {
  background-color: var(--primary-color-dark);
  color: var(--bg-color);
  border-color: var(--primary-color-dark);
}

/* --- Footer --- */
.footer {
  background-color: var(--text-color);
  color: var(--bg-color);
  text-align: center;
  padding: 40px 5%;
  font-size: 0.9em;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px; /* Aumenta el espacio entre los bloques del footer */
}

.footer-info p {
  margin-bottom: 8px;
}

.footer-info a {
  color: var(--primary-color);
  text-decoration: none;
}

.footer-info a:hover {
  color: var(--bg-color);
  text-decoration: underline;
}

/* --- Footer Social Icons (NUEVO) --- */
.footer-social {
  margin-top: 20px; /* Espacio superior para separar del bloque de información */
  text-align: center;
  width: 100%; /* Ocupa todo el ancho disponible para centrar mejor en responsive */
}

.footer-social h3 {
  font-size: 1.3em;
  margin-bottom: 15px;
  color: var(--bg-color);
}

.social-icons {
  display: flex;
  justify-content: center; /* Centra los iconos */
  gap: 15px; /* Espacio entre cada icono */
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px; /* Ancho del contenedor del icono */
  height: 45px; /* Alto del contenedor del icono */
  border-radius: 50%; /* Hace que el contenedor sea circular */
  background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco semitransparente */
  color: var(--bg-color); /* Color del icono (blanco) */
  font-size: 22px; /* Tamaño del icono */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  background-color: var(--primary-color); /* Cambia a color primario en hover */
  transform: translateY(-3px) scale(1.05); /* Efecto de levantamiento y ligero aumento */
}
/* FIN NUEVO */

.footer-map {
  width: 100%;
  max-width: 600px;
}

.footer-map h3 {
  font-size: 1.3em;
  margin-bottom: 15px;
  color: var(--bg-color);
}

.map-responsive {
  overflow: hidden;
  padding-bottom: 50%; /* Ajusta según tu iframe (300/600 * 100) */
  position: relative;
  height: 0;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  border: 0;
}

/* ... (resto de tu CSS existente, incluyendo las media queries) ... */

/* Ajustes adicionales para responsive en móviles si fuera necesario para los iconos */
@media (max-width: 768px) {
  /* ... (tus ajustes responsive existentes) ... */

  .footer-social {
    margin-top: 25px; /* Ajuste si necesitas más espacio en móviles */
    margin-bottom: 25px; /* Espacio inferior para separar del mapa */
  }
}

/* --- Pantalla de Bienvenida Modal --- */
.welcome-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 50, 0.8); /* Un azul oscuro semitransparente, ajusta a tu gusto */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Muy alto para estar por encima de todo */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
  padding: 20px; /* Espacio para que el modal no toque los bordes en pantallas pequeñas */
}

.welcome-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out, visibility 0s 0s;
}

.welcome-modal-content {
  background-color: var(--bg-color);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  padding: 30px 35px;
  max-width: 600px; /* Ancho máximo del modal */
  width: 100%;
  text-align: center;
  position: relative; /* Para el botón de cierre absoluto */
  transform: translateY(50px) scale(0.95); /* Estado inicial para animación */
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.2s, opacity 0.4s ease-in-out 0.2s; /* Animación con un pequeño delay */
}

.welcome-modal-overlay.active .welcome-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.welcome-modal-close-btn {
  position: absolute;
  top: 12px;
  right: 15px;
  background: none;
  border: none;
  font-size: 30px;
  color: var(--text-color-light);
  cursor: pointer;
  line-height: 1;
  padding: 5px;
  transition: color var(--transition-speed);
}
.welcome-modal-close-btn:hover {
  color: var(--primary-color);
}

.welcome-modal-image-container {
  margin-bottom: 25px;
  max-height: 300px; /* Limita la altura de la imagen si es muy grande */
  overflow: hidden; /* Para contener la imagen */
  border-radius: var(--border-radius-sm); /* Opcional: redondear la imagen */
}

.welcome-modal-image {
  width: 100%; /* Haz que la imagen ocupe el contenedor */
  height: 350px; /* Mantiene la proporción */
  max-height: 380px; /* Asegura que no exceda la altura del contenedor */
  object-fit: contain; /* Cubre el área, puede recortar un poco */
  display: block;
}

.welcome-modal-text h2 {
  font-size: clamp(28px, 5vw, 40px);
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
}

.welcome-modal-text p {
  font-size: 17px;
  color: var(--text-color-light);
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 450px; /* Evita que el texto sea demasiado ancho */
  margin-left: auto;
  margin-right: auto;
}

.welcome-modal-action-btn {
  /* Reutiliza los estilos de .btn y .btn-primary */
  padding: 12px 40px;
  font-size: 16px;
}

/* Evitar scroll en el body cuando el modal está activo */
body.modal-welcome-open {
  overflow: hidden;
}

/* Estilo para el input de texto si lo implementas luego */
/*
.chatbot-input-area input[type="text"] {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
}
.chatbot-input-area button[type="submit"] {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 500;
}
.chatbot-input-area button[type="submit"]:hover {
  background-color: var(--primary-color-dark);
}
*/

/* Hacer que el icono flotante se oculte cuando el chat está activo */
.floating-chat-icon.hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}

/* --- Responsive --- */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; } /* Asegurar estilos base */

/* Adaptaciones para pantallas pequeñas */
@media (max-width: 480px) {
  .welcome-modal-content {
    padding: 25px 20px;
  }
  .welcome-modal-text h2 {
    font-size: 24px;
  }
  .welcome-modal-text p {
    font-size: 15px;
  }
  .welcome-modal-action-btn {
    padding: 10px 30px;
    font-size: 15px;
  }
  .welcome-modal-image-container,
  .welcome-modal-image {
    max-height: 300px; /* Imagen más pequeña en móviles */
  }
}

@media (max-width: 992px) { /* Tabletas */
  .hero-content { gap: 20px; }
  .hero-text { flex-basis: 50%; }
  .hero-image-area { flex-basis: 50%; }
  .blue-globe { width: 500px; height: 500px; right: -200px; }

  .services-row-top { gap: 30px; }
  .services-main-intro { flex-basis: 60%; }
  .services-main-illustration { flex-basis: 40%; }
  .service-illustration-img { max-height: 260px; }
  .services-row-bottom { gap: 40px; }

  .about-content {
    gap: 30px;
  }
}

@media (max-width: 768px) { /* Móviles */
  :root { --navbar-height: 70px; }
  .menu-toggle { display: block; z-index: 1001; position: relative; /* Para estar sobre el menú si es necesario */ }
  .navbar { padding-left: 5%; padding-right: 5%; }
  .menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(5px); flex-direction: column; align-items: center; justify-content: center; gap: 20px; transform: translateX(100%); transition: transform var(--transition-speed); padding-top: var(--navbar-height); z-index: 999; }
  .menu.active { transform: translateX(0); }
  .menu a { font-size: 1.5em; padding: 10px 0; }
  .menu a.btn-header { font-size: 1.2em; padding: 12px 25px; width: auto; min-width: 0;}
  .menu-toggle span { display: block; width: 25px; height: 3px; background-color: var(--text-color); margin: 5px 0; transition: all var(--transition-speed); }
  .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .hero { min-height: auto; padding-top: 20px; padding-bottom: 40px; }
  .hero .carousel-container { /* Renombrado para apuntar al nuevo contenedor */
    padding-left: 0;
    padding-right: 0;
    height: auto; /* Permitir que el contenedor del carrusel se adapte a su contenido */
  }
  .carousel-inner {
    min-height: 400px; /* Ajusta la altura mínima en móviles */
    height: auto; /* Permitir que el carrusel-inner se adapte a su contenido */
  }
  .carousel-item {
    position: relative; /* Cambiar a relative para que se apilen verticalmente */
    height: auto; /* Permitir que el item se adapte a su contenido */
    opacity: 1; /* Todos visibles, el JS gestionará la visibilidad por scroll o hidden */
    visibility: visible;
    transform: translateX(0); /* Reiniciar transform */
    transition: none; /* Desactivar transiciones de opacity aquí, se manejará de otra forma o se oculta */
    flex-direction: column; /* Apilar contenido en columna */
    text-align: center;
    margin-bottom: 40px; /* Espacio entre slides */
  }
  .carousel-item:not(.active) {
    display: none; /* Ocultar slides no activas si se cambia a método de display */
  }
  /* En el modo móvil, si las slides no se "deslizan" sino que se "faden",
     la estructura flexbox se mantiene, solo se oculta la slide no activa.
     Si quieres un carrusel por scroll, el CSS cambia mucho.
     Para este ejemplo, seguimos con fade/display en móvil. */

  .hero-content { flex-direction: column; align-items: center; text-align: center; padding: 0 5%; }
  .hero-text { order: 2; padding-right: 0; max-width: 100%; margin-bottom: 40px; }
  .hero-image-area { order: 1; width: 100%; max-width: 380px; margin-bottom: 30px; min-height: 300px; }
  .person-image { max-height: 350px; }
  .blue-globe { width: 400px; height: 400px; right: -220px; top: 10%; transform: translateY(0); opacity: 0.1; animation-name: none; /* Desactivar animación compleja en móvil si causa problemas */}
  .dotted-pattern { display: none; }
  .buttons { justify-content: center; }

  /* Ajustes para controles e indicadores en móvil */
  .carousel-control {
    width: 40px;
    height: 40px;
  }
  .carousel-control-prev { left: 10px; }
  .carousel-control-next { right: 10px; }
  .carousel-indicators { bottom: 15px; }

  .services-section { padding: 60px 0; }
  .services-grid-layout { gap: 30px; }
  .services-row-top { flex-direction: column; text-align: center; }
  .services-main-intro { max-width: 100%; margin-bottom: 30px; }
  .service-illustration-img { max-height: 220px; }
  .services-row-bottom { flex-direction: column; align-items: stretch; /* Estirar para mejor alineación */ gap: 30px; }
  .services-subcolumn-left, .services-subcolumn-right { width: 100%; max-width: 450px; margin: 0 auto; /* Centrar columnas */ align-items: flex-start; /* Alinear items a la izquierda */}
  .service-item { width: 100%; padding: 10px; margin: -10px; /* Ajuste de compensación */ }
  .services-cta-button { align-self: center; width: 80%; max-width: 300px; }

  .about-section { padding: 60px 0; }
  .about-content { flex-direction: column; gap: 30px; }
  .about-section h2 { font-size: 24px; }
  .mission-card, .vision-card { padding: 25px; }
  .card-illustration { max-height: 120px; }
}


/* --- Accesibilidad: Reducir Movimiento --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .blue-globe, .floating-chat-icon {
    animation-name: none !important; /* Desactiva animaciones continuas */
  }
}