.footer {
  background-color: var(--color-title);
  color: white;
  padding: 4rem 0 1.5rem;
  min-height: 450px;
  contain: layout style paint;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 3rem;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.footer-logo {
  max-height: 60px;
  height: 60px;
  width: 253px;
  filter: brightness(0) invert(1); /* Convierte el logo a blanco */
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.footer-section h4 {
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.footer-section ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.footer-section ul li a:hover {
  color: var(--color-accent);
  transform: translateX(4px);
}

.contact-icon {
  color: var(--color-accent);
  font-size: 1rem;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(253, 191, 80, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.footer-social {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.social-link:hover {
  background-color: var(--color-accent);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

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

.footer-copyright {
  text-align: center;
}

.footer-copyright p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-size: 0.9rem;
}

/* JMCDEV attribution link styling */
.jmcdev-link {
  color: #FDBF50; /* Amarillo Abadie */
  font-weight: 700;
  text-decoration: none;
  /* Safari / iOS: ensure the link color is applied to text (prevents -webkit-text-fill-color issues) */
  -webkit-text-fill-color: #FDBF50;
  /* Prevent blend modes or inherited filters from altering visibility on iOS */
  mix-blend-mode: normal;
  filter: none;
}

.jmcdev-link:hover {
  text-decoration: underline;
  color: #e6ac47;
  -webkit-text-fill-color: #e6ac47;
}

.jmcdev-link:visited,
.jmcdev-link:active {
  /* Explicitly set visited/active colors for browsers that recolor links (including some iOS versions) */
  color: #e6ac47;
  -webkit-text-fill-color: #e6ac47;
}

.footer-jmcdev-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-jmcdev-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.footer-jmcdev-logo a:hover {
  opacity: 1;
  transform: scale(1.1);
}

.footer-jmcdev-logo img {
  width: 120px;
  height: 30px;
  object-fit: contain;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 3rem 0 1.5rem;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .footer-brand {
    align-items: center;
  }
  
  .footer-links {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: left;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 2rem 0 1rem;
  }
  
  .footer-content {
    gap: 1.5rem;
  }
  
  .footer-section h4 {
    margin-bottom: 1rem;
  }
  
  .footer-section ul li {
    margin-bottom: 0.6rem;
  }
  
  .social-link {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  padding: 0.4rem 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Expose navbar height as a CSS variable so pages can offset their content */
:root {
  --navbar-height: 55px; /* default mobile height */
}

@media (min-width: 768px) {
  :root {
    --navbar-height: 60px; /* desktop slightly taller when needed */
  }
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 55px;
  transition: all 0.4s ease;
}

.navbar-brand {
  display: flex;
  align-items: center;
  z-index: 1001; /* Ensure logo stays above mobile menu */
  transition: all 0.4s ease;
}

/* Logo brand normal */

.navbar-logo {
  height: 40px; /* Tamaño estándar consistente */
  width: auto;
  max-width: none;
  transition: all 0.3s ease;
  display: block;
  object-fit: contain;
  /* ensure vertical centering within navbar height */
  max-height: 40px; /* keep logo constrained to 40px to avoid oversized logos */
}

/* If logo link contains extra padding, remove to keep visual centering */
.navbar-brand .navbar-logo-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
  align-items: center;
  transition: all 0.4s ease;
}

.navbar-menu a {
  color: var(--color-text-primary, #333333); /* Dark text for light background */
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
}

.navbar-menu a:hover {
  color: var(--color-accent);
  background-color: rgba(253, 191, 80, 0.1);
}

.nav-icon-desktop {
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
}

/* Improved navbar button styling */
.navbar-btn {
  padding: 0.5rem 1.25rem !important;
  margin-left: 0.5rem;
  border: 2px solid var(--color-accent) !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem !important;
  height: 38px;
  transition: all 0.3s ease !important;
}

/* Button in transparent navbar state */
.navbar-in-header:not(.navbar-scrolled) .navbar-btn {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Button in scrolled or non-header navbar state */
.navbar-scrolled .navbar-btn, 
.navbar:not(.navbar-in-header) .navbar-btn {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  background-color: transparent;
}

/* Hover state for button - updated to match header's view services button */
.navbar-btn:hover {
  color: #5028d9 !important;
  background-color: transparent !important;
  text-decoration: none;
  transform: translateY(-2px);
}

.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001; /* Ensure button stays above mobile menu */
  transition: all 0.4s ease;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: var(--color-text-primary);
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

/* Hamburger icon color for the light semi-transparent navbar state */
.navbar-scrolled .mobile-menu-toggle span,
.navbar:not(.navbar-in-header) .mobile-menu-toggle span {
  background-color: var(--color-text-primary, #333333); /* Dark hamburger icon lines */
}

/* Hamburger menu animation */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

.mobile-menu {
  position: absolute; /* Positioned relative to the navbar */
  top: calc(100% + 10px); /* Start 10px below the navbar */
  left: 10px; /* Add some space from the left edge */
  right: 10px; /* Add some space from the right edge */
  width: auto; /* Adjust width based on left/right spacing */
  background-color: rgba(255, 255, 255, 0.85); /* Light semi-transparent background */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow for floating effect */
  z-index: 999; /* Below navbar elements like logo/toggle if they have higher z-index */
  
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: space-around; /* Distribute items nicely */
  padding: 0.75rem; /* Padding for the panel */
  border-radius: 8px; /* Rounded corners for floating look */
  
  transform-origin: top;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: scaleY(0.95) translateY(-10px); /* Initial state for animation */
  opacity: 0;
  pointer-events: none; /* Not interactive when hidden */
  list-style: none; /* Remove default list styling */
  margin: 0; /* Remove default margin */
}

.mobile-menu.active {
  transform: scaleY(1) translateY(0);
  opacity: 1;
  pointer-events: auto; /* Interactive when shown */
}

.mobile-menu li {
  /* Removed specific li styling like border, relying on link styling */
  margin: 0.25rem; /* Small margin around items */
}

.mobile-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-text-primary);
  padding: 0.75rem 0.5rem;
  min-width: 75px;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.mobile-menu a:hover {
  background-color: rgba(253, 191, 80, 0.1);
  transform: translateY(-2px);
}

.mobile-menu a:hover .nav-icon {
  color: var(--color-accent);
  transform: scale(1.1);
}

.mobile-menu a:hover .nav-text {
  color: var(--color-accent);
}

.mobile-menu a:hover .nav-icon {
  color: var(--color-accent);
  transform: scale(1.1);
}

.mobile-menu a:hover .nav-text {
  color: var(--color-accent);
}

.mobile-menu .nav-icon {
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
  line-height: 1;
  color: var(--color-text-primary);
  transition: all 0.3s ease;
}

.mobile-menu .nav-icon svg {
  display: block;
  stroke-width: 2;
}

.mobile-menu .nav-text {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text-primary);
  transition: all 0.3s ease;
}

/* Active link styling - to match the "Analytics" item in the image */
.mobile-menu a.active-link .nav-icon,
.mobile-menu a.active-link .nav-text {
  color: var(--color-accent-purple, #6A0DAD); /* Purple color for active item, adjust as needed */
}
.mobile-menu a.active-link .nav-text {
  font-weight: 600; /* Bolder text for active item */
}

.desktop-menu {
  display: none;
}

/* Improved mobile contact button styling */
.nav-contact-btn {
  background-color: rgba(253, 191, 80, 0.15);
  border-radius: 8px;
}

.nav-contact-btn .nav-icon,
.nav-contact-btn .nav-text {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
}

.nav-contact-btn .nav-icon {
  font-size: 1.6rem;
}

.nav-contact-btn:hover {
  background-color: rgba(253, 191, 80, 0.25) !important;
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .navbar {
    padding: 1rem 0;
  }
  
  .navbar-scrolled {
    /* Ensure scrolled background is consistent with the light semi-transparent style */
    background-color: rgba(255, 255, 255, 0.85); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0.6rem 0; /* Un poco más alta en desktop */
  }
  
  .navbar-scrolled .navbar-content {
    height: 50px; /* Un poco más alta en desktop */
  }
  
  /* Keep logo consistent and avoid oversized variants */
  .navbar-logo,
  .navbar-in-header .navbar-logo,
  .navbar-brand.navbar-brand-centered .navbar-logo,
  .navbar-scrolled .navbar-logo {
    height: 40px;
    max-height: 40px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   El menú completo, recién a partir de 1024px.
   =============================================
   Estaba en 768, que es el ancho de un iPad vertical: cuatro ítems con ícono más
   el botón de contacto no entran en 768px de ancho y quedaban apretados contra
   el logo. Debajo de 1024 va la hamburguesa, que en esa franja es lo que
   corresponde.

   Los dos menús se renderizan siempre en el DOM, así que esto es solo CSS: no
   hace falta tocar el componente. El resto del bloque de 768px —alturas, padding
   y tamaño del logo— se queda ahí, porque eso sí mejora desde el iPad.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .desktop-menu {
    display: flex;
  }

  .mobile-menu-toggle {
    display: none;
  }

  /* Y el panel que abre ese botón. Sin esto, abrirlo en vertical y rotar el
     iPad deja el panel desplegado y sin botón para cerrarlo. */
  .mobile-menu {
    display: none;
  }
}

.top-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  background: linear-gradient(
    135deg,
    var(--color-title) 0%,
    rgba(0, 82, 156, 0.9) 100%
  );
  color: white;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--color-accent);
  box-shadow: 
    0 4px 15px rgba(0, 82, 156, 0.3),
    0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.top-button.visible {
  opacity: 1;
  transform: translateY(0);
}

.top-button:hover {
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    #e6a640 100%
  );
  transform: translateY(-5px) scale(1.1);
  box-shadow: 
    0 8px 25px rgba(253, 191, 80, 0.4),
    0 12px 35px rgba(0, 0, 0, 0.2);
  border-color: white;
}

.top-button:active {
  transform: translateY(-2px) scale(1.05);
}

@media (max-width: 768px) {
  .top-button {
    width: 50px;
    height: 50px;
    bottom: 1.5rem;
    right: 1.5rem;
  }
  
  .top-button:hover {
    transform: translateY(-3px) scale(1.05);
  }
}