.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;
}

.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: white;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.3);
  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);
}

/* Los tres enlaces legales del pie. Sin colores de marca escritos: el hover usa
   el token de acento, así que esto es igual en los tres repos. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.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: #976087;
  font-weight: 700;
  text-decoration: none;
  -webkit-text-fill-color: #976087;
  mix-blend-mode: normal;
  filter: none;
}

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

.jmcdev-link:visited,
.jmcdev-link:active {
  color: #976087;
  -webkit-text-fill-color: #976087;
}

.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 - Diseño moderno Fabiana Peirano
   ================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.2s ease;
  padding: 0.4rem 0;
  background-color: rgba(247, 247, 247, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(100, 75, 109, 0.08);
  border-bottom: 3px solid transparent;
}

.navbar-scrolled {
  background-color: rgba(247, 247, 247, 0.98);
  box-shadow: 0 2px 12px rgba(100, 75, 109, 0.12);
  border-bottom-color: #644b6d;
}

/* Expose navbar height as a CSS variable */
:root {
  --navbar-height: 58px;
}

@media (min-width: 768px) {
  :root {
    --navbar-height: 64px;
  }
}

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

.navbar-brand {
  display: flex;
  align-items: center;
  z-index: 1001;
  transition: all 0.2s ease;
}

.navbar-logo {
  height: 42px;
  width: auto;
  max-width: none;
  transition: all 0.2s ease;
  display: block;
  object-fit: contain;
  max-height: 42px;
}

.navbar-brand .navbar-logo-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

/* DESKTOP MENU */
.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
  align-items: center;
  transition: all 0.2s ease;
}

.navbar-menu a {
  color: #644b6d;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 0;
  border: 2px solid transparent;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.navbar-menu a:hover {
  color: #976087;
  background-color: rgba(151, 96, 135, 0.1);
  border-color: #976087;
  transform: translateY(-2px);
}

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

/* NAVBAR BUTTON */
.navbar-btn {
  padding: 0.65rem 1.5rem !important;
  margin-left: 0.75rem;
  border: 3px solid #976087 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem !important;
  height: auto;
  transition: all 0.2s ease !important;
  background-color: transparent;
  color: #976087 !important;
  box-shadow: 0 3px 10px rgba(151, 96, 135, 0.15);
}

.navbar-btn:hover {
  color: white !important;
  background-color: #976087 !important;
  border-color: #976087 !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(151, 96, 135, 0.2);
}

/* MOBILE MENU TOGGLE */
.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
  transition: all 0.2s ease;
  border-radius: 0;
}

.mobile-menu-toggle:hover {
  border-color: #976087;
  background-color: rgba(151, 96, 135, 0.1);
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: #644b6d;
  margin: 3px 0;
  transition: 0.2s;
  border-radius: 0;
}

/* 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 */
.mobile-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 10px;
  right: 10px;
  width: auto;
  background-color: #f7f7f7;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
  border: 3px solid #644b6d;
  z-index: 999;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 1rem;
  border-radius: 0;
  
  transform-origin: top;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transform: scaleY(0.95) translateY(-10px);
  opacity: 0;
  pointer-events: none;
  list-style: none;
  margin: 0;
}

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

.mobile-menu li {
  margin: 0.35rem;
}

.mobile-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #644b6d;
  padding: 0.875rem 0.65rem;
  min-width: 80px;
  transition: all 0.2s ease;
  border-radius: 0;
  border: 2px solid transparent;
}

.mobile-menu a:hover {
  background-color: rgba(151, 96, 135, 0.1);
  border-color: #976087;
  transform: translateY(-2px);
}

.mobile-menu a:hover .nav-icon {
  color: #976087;
  transform: scale(1.15);
}

.mobile-menu a:hover .nav-text {
  color: #976087;
}

.mobile-menu .nav-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1;
  color: #644b6d;
  transition: all 0.2s ease;
}

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

.mobile-menu .nav-text {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  color: #644b6d;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Active link styling */
.mobile-menu a.active-link .nav-icon,
.mobile-menu a.active-link .nav-text {
  color: #976087;
}

.mobile-menu a.active-link {
  border-color: #976087;
  background-color: rgba(151, 96, 135, 0.1);
}

.mobile-menu a.active-link .nav-text {
  font-weight: 800;
}

/* Mobile contact button */
.nav-contact-btn {
  background-color: rgba(151, 96, 135, 0.15);
  border-color: #976087 !important;
  border-radius: 0;
}

.nav-contact-btn .nav-icon,
.nav-contact-btn .nav-text {
  color: #976087 !important;
  font-weight: 700 !important;
}

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

.nav-contact-btn:hover {
  background-color: #976087 !important;
  border-color: #976087 !important;
  transform: translateY(-2px);
}

.nav-contact-btn:hover .nav-icon,
.nav-contact-btn:hover .nav-text {
  color: white !important;
}

.desktop-menu {
  display: none;
}

/* ================================================
   RESPONSIVE - DESKTOP
   ================================================ */

@media (min-width: 768px) {
  .navbar {
    padding: 1rem 0;
  }
  
  .navbar-scrolled {
    background-color: rgba(247, 247, 247, 0.98);
    box-shadow: 0 4px 0 rgba(100, 75, 109, 0.2);
    border-bottom-color: #644b6d;
    padding: 0.7rem 0;
  }
  
  .navbar-scrolled .navbar-content {
    height: 54px;
  }
  
  .navbar-logo,
  .navbar-in-header .navbar-logo,
  .navbar-brand.navbar-brand-centered .navbar-logo,
  .navbar-scrolled .navbar-logo {
    height: 42px;
    max-height: 42px;
  }

  .navbar-content {
    height: 64px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   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;
  }
}

/* ================================================
   RESPONSIVE - TABLET
   ================================================ */

/* Este tramo achica el menú de escritorio. Decía `max-width: 1024px`, que cuando
   el menú aparecía en 768 significaba "de 768 a 1024"; ahora el menú no existe
   por debajo de 1024, así que la franja arranca ahí. Es ajuste de densidad para
   el escritorio angosto y el iPad acostado, no un cambio de layout. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .navbar-menu {
    gap: 1rem;
  }

  .navbar-menu a {
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
  }

  .navbar-btn {
    padding: 0.6rem 1.25rem !important;
    font-size: 0.8rem !important;
  }
}

/* ================================================
   RESPONSIVE - MOBILE
   ================================================ */

/* 767 y no 768: en 768 exactos aplicaban a la vez este bloque y el
   `min-width: 768px` de arriba, y la navbar quedaba con dos alturas y dos
   paddings peleando. */
@media (max-width: 767px) {
  .navbar {
    padding: 0.5rem 0;
  }

  .navbar-content {
    height: 56px;
  }

  .navbar-logo {
    height: 38px;
    max-height: 38px;
  }

  .mobile-menu {
    top: calc(100% + 8px);
    left: 8px;
    right: 8px;
    padding: 0.875rem;
    border-width: 2px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
  }

  .mobile-menu li {
    margin: 0.25rem;
  }

  .mobile-menu a {
    padding: 0.75rem 0.5rem;
    min-width: 70px;
  }

  .mobile-menu .nav-icon {
    font-size: 1.3rem;
  }

  .mobile-menu .nav-text {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .navbar-content {
    height: 52px;
  }

  .navbar-logo {
    height: 36px;
    max-height: 36px;
  }

  .mobile-menu {
    padding: 0.75rem;
  }

  .mobile-menu a {
    padding: 0.65rem 0.4rem;
    min-width: 65px;
  }

  .mobile-menu .nav-icon {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }

  .mobile-menu .nav-text {
    font-size: 0.65rem;
  }
}

.top-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  background: #644b6d;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 4px solid #976087;
  box-shadow: 0 8px 30px rgba(100, 75, 109, 0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

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

.top-button:hover {
  background: #976087;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(151, 96, 135, 0.2);
  border-color: #644b6d;
}

.top-button:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(100, 75, 109, 0.15);
}

@media (max-width: 768px) {
  .top-button {
    width: 55px;
    height: 55px;
    bottom: 1.5rem;
    right: 1.5rem;
    box-shadow: 0 6px 25px rgba(100, 75, 109, 0.12);
  }
  
  .top-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(151, 96, 135, 0.18);
  }
}