/* =========================================================
   Mizunara Studio Design System
   Footer Component
   css/components/footer.css
   Version 2.0
========================================================= */

/* =========================================================
   WRAPPER DEL BUILDER

   El Builder genera:
   .ms-component.ms-footer

   Dentro se carga:
   footer.ms-footer

   Estas reglas evitan aplicar dos veces el padding,
   fondo y estilos estructurales.
========================================================= */

.ms-component[data-component="footer"] {
  display: block;

  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;

  text-align: initial;
}

.ms-component[data-component="footer"] > .ms-footer {
  width: 100%;
}

/* =========================================================
   VARIABLES DEL COMPONENTE
========================================================= */

.ms-component[data-component="footer"] {
  --footer-primary: var(--ms-color-primary, #c8a46b);

  --footer-primary-dark: var(--ms-color-primary-dark, #8f6d35);

  --footer-text: var(--ms-color-text, #342b25);

  --footer-muted: var(--ms-color-muted, rgba(52, 43, 37, 0.66));

  --footer-background: var(--ms-color-surface, #faf7f2);

  --footer-glass: rgba(255, 255, 255, 0.46);

  --footer-glass-strong: rgba(255, 255, 255, 0.68);

  --footer-border: rgba(200, 164, 107, 0.24);

  --footer-shadow: 0 18px 48px rgba(47, 35, 27, 0.1);

  --footer-radius: var(--ms-radius-xl, 28px);
}

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

.ms-component[data-component="footer"] .ms-footer {
  position: relative;
  isolation: isolate;

  width: 100%;

  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 3.5rem);

  overflow: hidden;

  color: var(--footer-text);

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(200, 164, 107, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 86%,
      rgba(221, 193, 168, 0.14),
      transparent 32%
    ),
    var(--footer-background);

  text-align: center;
}

/* Decoración ambiental izquierda */

.ms-component[data-component="footer"] .ms-footer::before {
  content: "";

  position: absolute;
  top: -130px;
  left: -140px;
  z-index: -1;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(200, 164, 107, 0.12),
    transparent 70%
  );

  filter: blur(5px);

  pointer-events: none;
}

/* Decoración ambiental derecha */

.ms-component[data-component="footer"] .ms-footer::after {
  content: "";

  position: absolute;
  right: -150px;
  bottom: -150px;
  z-index: -1;

  width: 370px;
  height: 370px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(218, 184, 163, 0.15),
    transparent 70%
  );

  filter: blur(5px);

  pointer-events: none;
}

/* =========================================================
   CONTENEDOR
========================================================= */

.ms-component[data-component="footer"] .ms-footer .ms-container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   DIVISOR SUPERIOR
========================================================= */

.ms-component[data-component="footer"] .ms-footer-divider {
  position: relative;
  z-index: 2;

  width: clamp(90px, 14vw, 150px);

  height: 1px;

  margin: 0 auto clamp(2.5rem, 5vw, 3.6rem);

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 164, 107, 0.95),
    transparent
  );
}

.ms-component[data-component="footer"] .ms-footer-divider::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 7px;
  height: 7px;

  border: 1px solid rgba(200, 164, 107, 0.8);

  transform: translate(-50%, -50%) rotate(45deg);

  background: var(--footer-background);
}

/* =========================================================
   CONTENIDO
========================================================= */

.ms-component[data-component="footer"] .ms-footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(92%, 760px);

  margin-inline: auto;

  gap: clamp(1rem, 2.5vw, 1.4rem);
}

/* =========================================================
   BOTÓN VOLVER AL INICIO
========================================================= */

.ms-component[data-component="footer"] .ms-footer-back-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  gap: 0.55rem;

  margin-bottom: 0.4rem;

  padding: 0.72rem 1.1rem;

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

  border-radius: var(--ms-radius-full, 999px);

  color: var(--footer-primary-dark);

  background: rgba(255, 255, 255, 0.36);

  font-family: var(--ms-font-body, inherit);

  font-size: 0.7rem;
  font-weight: 650;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  box-shadow: 0 8px 24px rgba(47, 35, 27, 0.06);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  cursor: pointer;

  transition:
    transform 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.ms-component[data-component="footer"] .ms-footer-back-top[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-back-top svg {
  width: 17px;
  height: 17px;

  transition: transform 220ms ease;
}

.ms-component[data-component="footer"] .ms-footer-back-top:hover {
  transform: translateY(-2px);

  border-color: rgba(200, 164, 107, 0.42);

  background: rgba(255, 255, 255, 0.62);

  box-shadow: 0 12px 30px rgba(47, 35, 27, 0.09);
}

.ms-component[data-component="footer"] .ms-footer-back-top:hover svg {
  transform: translateY(-2px);
}

.ms-component[data-component="footer"] .ms-footer-back-top:active {
  transform: translateY(0) scale(0.97);
}

.ms-component[data-component="footer"] .ms-footer-back-top:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 4px rgba(200, 164, 107, 0.16),
    0 12px 30px rgba(47, 35, 27, 0.09);
}

/* =========================================================
   LOGO
========================================================= */

.ms-component[data-component="footer"] .ms-footer-logo {
  display: grid;
  place-items: center;

  margin-bottom: 0.2rem;
}

.ms-component[data-component="footer"] .ms-footer-logo[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-logo-image {
  display: block;

  width: clamp(72px, 10vw, 96px);

  height: clamp(72px, 10vw, 96px);

  object-fit: contain;

  filter: drop-shadow(0 10px 24px rgba(47, 35, 27, 0.09));
}

/* =========================================================
   INFORMACIÓN DEL EVENTO
========================================================= */

.ms-component[data-component="footer"] .ms-footer-event {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.5rem;

  width: 100%;
}

.ms-component[data-component="footer"] .ms-footer-event[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-event-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  color: var(--footer-primary-dark);

  font-size: 0.68rem;
  font-weight: 650;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ms-component[data-component="footer"] .ms-footer-event-kicker[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-event-kicker::before,
.ms-component[data-component="footer"] .ms-footer-event-kicker::after {
  content: "";

  width: 22px;
  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(200, 164, 107, 0.85));
}

.ms-component[data-component="footer"] .ms-footer-event-kicker::after {
  transform: scaleX(-1);
}

.ms-component[data-component="footer"] .ms-footer-event-names {
  margin: 0;

  color: var(--footer-text);

  font-family: var(--ms-font-script, cursive);

  font-size: clamp(2.4rem, 7vw, 4.4rem);

  font-weight: 400;
  line-height: 1;

  text-wrap: balance;
}

.ms-component[data-component="footer"] .ms-footer-event-names[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-event-date {
  margin: 0;

  color: var(--footer-primary-dark);

  font-size: 0.75rem;
  font-weight: 650;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ms-component[data-component="footer"] .ms-footer-event-date[hidden] {
  display: none !important;
}

/* =========================================================
   TÍTULO
========================================================= */

.ms-component[data-component="footer"] .ms-footer-title {
  max-width: 680px;

  margin: 0.35rem 0 0;

  color: var(--footer-text);

  font-family: var(--ms-font-title, serif);

  font-size: clamp(1.8rem, 4vw, 2.7rem);

  font-weight: 500;
  line-height: 1.15;

  text-wrap: balance;
}

.ms-component[data-component="footer"] .ms-footer-title[hidden] {
  display: none !important;
}

/* =========================================================
   DESCRIPCIÓN
========================================================= */

.ms-component[data-component="footer"] .ms-footer-description {
  max-width: 630px;

  margin: 0;

  color: var(--footer-muted);

  font-family: var(--ms-font-body, inherit);

  font-size: clamp(0.94rem, 1.7vw, 1.05rem);

  line-height: 1.85;

  text-wrap: balance;
}

.ms-component[data-component="footer"] .ms-footer-description[hidden] {
  display: none !important;
}

/* =========================================================
   REDES SOCIALES
========================================================= */

.ms-component[data-component="footer"] .ms-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 0.85rem;

  margin-top: 0.45rem;
}

.ms-component[data-component="footer"] .ms-footer-social[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-social a {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border: 1px solid rgba(200, 164, 107, 0.22);

  border-radius: 50%;

  color: var(--footer-primary-dark);

  background: var(--footer-glass);

  text-decoration: none;

  box-shadow: 0 8px 22px rgba(47, 35, 27, 0.06);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform 240ms ease,
    color 240ms ease,
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.ms-component[data-component="footer"] .ms-footer-social a[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-social a svg {
  width: 21px;
  height: 21px;
}

.ms-component[data-component="footer"] .ms-footer-social a:hover {
  transform: translateY(-4px);

  border-color: rgba(200, 164, 107, 0.46);

  color: var(--footer-primary);

  background: var(--footer-glass-strong);

  box-shadow: 0 14px 30px rgba(47, 35, 27, 0.1);
}

.ms-component[data-component="footer"] .ms-footer-social a:active {
  transform: translateY(-1px) scale(0.95);
}

.ms-component[data-component="footer"] .ms-footer-social a:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 4px rgba(200, 164, 107, 0.17),
    0 12px 28px rgba(47, 35, 27, 0.09);
}

/* =========================================================
   COPYRIGHT
========================================================= */

.ms-component[data-component="footer"] .ms-footer-copy {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 0.3rem;

  margin-top: 0.65rem;

  color: var(--footer-muted);

  font-size: 0.78rem;
  font-weight: 450;
  line-height: 1.6;
}

.ms-component[data-component="footer"] .ms-footer-copy[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"]
  .ms-footer-copy
  [data-footer-year][hidden] {
  display: none !important;
}

/* =========================================================
   CRÉDITOS
========================================================= */

.ms-component[data-component="footer"] .ms-footer-credit {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 0.35rem;

  color: var(--footer-muted);

  font-size: 0.83rem;
  line-height: 1.5;
}

.ms-component[data-component="footer"] .ms-footer-credit[hidden] {
  display: none !important;
}

.ms-component[data-component="footer"] .ms-footer-credit-link {
  position: relative;

  color: var(--footer-primary-dark);

  font-weight: 650;

  text-decoration: none;
}

.ms-component[data-component="footer"] .ms-footer-credit-link::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--footer-primary),
    transparent
  );

  transform: scaleX(0);

  transform-origin: center;

  transition: transform 220ms ease;
}

.ms-component[data-component="footer"] .ms-footer-credit-link:hover::after {
  transform: scaleX(1);
}

.ms-component[data-component="footer"] .ms-footer-credit-link:focus-visible {
  outline: 2px solid rgba(200, 164, 107, 0.45);

  outline-offset: 4px;

  border-radius: 3px;
}

/* =========================================================
   ANIMACIÓN DE ENTRADA
========================================================= */

.ms-component[data-component="footer"] .ms-footer-content,
.ms-component[data-component="footer"] .ms-footer-divider {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.85s var(--ms-ease-luxury, ease),
    transform 0.85s var(--ms-ease-luxury, ease);
}

.ms-component[data-component="footer"]
  .ms-footer.ms-footer-ready
  .ms-footer-divider {
  opacity: 1;

  transform: translateY(0);
}

.ms-component[data-component="footer"]
  .ms-footer.ms-footer-ready
  .ms-footer-content {
  opacity: 1;

  transform: translateY(0);

  transition-delay: 0.12s;
}

/* =========================================================
   EFECTO GLOW OPCIONAL
========================================================= */

.ms-component[data-component="footer"]
  .ms-footer.ms-footer--glow
  .ms-footer-logo-image {
  filter: drop-shadow(0 0 24px rgba(200, 164, 107, 0.3));
}

.ms-component[data-component="footer"]
  .ms-footer.ms-footer--glow
  .ms-footer-divider {
  box-shadow: 0 0 18px rgba(200, 164, 107, 0.3);
}

/* =========================================================
   VARIANTE LUXURY
========================================================= */

.ms-component[data-component="footer"] .ms-footer--luxury {
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(200, 164, 107, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 86%,
      rgba(221, 193, 168, 0.14),
      transparent 32%
    ),
    #faf7f2;
}

/* =========================================================
   VARIANTE GLASS
========================================================= */

.ms-component[data-component="footer"] .ms-footer--glass {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.66),
    rgba(255, 255, 255, 0.34)
  );

  backdrop-filter: blur(22px) saturate(1.1);

  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}

/* =========================================================
   TEMA OSCURO
========================================================= */

.theme-dark .ms-component[data-component="footer"] {
  --footer-text: #f6f1ea;

  --footer-muted: rgba(255, 255, 255, 0.68);

  --footer-background: #171513;

  --footer-glass: rgba(255, 255, 255, 0.07);

  --footer-glass-strong: rgba(255, 255, 255, 0.12);

  --footer-border: rgba(200, 164, 107, 0.28);
}

.theme-dark .ms-component[data-component="footer"] .ms-footer {
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(200, 164, 107, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 86%,
      rgba(128, 90, 70, 0.16),
      transparent 32%
    ),
    #171513;
}

.theme-dark .ms-component[data-component="footer"] .ms-footer-divider::before {
  background: #171513;
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {
  .ms-component[data-component="footer"] .ms-footer {
    padding: 4.8rem 0 2.8rem;
  }

  .ms-component[data-component="footer"] .ms-footer-content {
    width: 90%;
  }
}

/* =========================================================
   RESPONSIVE — MÓVIL
========================================================= */

@media (max-width: 600px) {
  .ms-component[data-component="footer"] .ms-footer {
    padding: 4rem 0 2.2rem;
  }

  .ms-component[data-component="footer"] .ms-footer-divider {
    margin-bottom: 2.4rem;
  }

  .ms-component[data-component="footer"] .ms-footer-content {
    width: 88%;

    gap: 1rem;
  }

  .ms-component[data-component="footer"] .ms-footer-back-top {
    width: 100%;
    max-width: 240px;
  }

  .ms-component[data-component="footer"] .ms-footer-event-names {
    font-size: clamp(2.3rem, 13vw, 3.6rem);
  }

  .ms-component[data-component="footer"] .ms-footer-title {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
  }

  .ms-component[data-component="footer"] .ms-footer-description {
    font-size: 0.94rem;
    line-height: 1.75;
  }

  .ms-component[data-component="footer"] .ms-footer-social {
    gap: 0.7rem;
  }

  .ms-component[data-component="footer"] .ms-footer-social a {
    width: 44px;
    height: 44px;
  }

  .ms-component[data-component="footer"] .ms-footer-social a svg {
    width: 19px;
    height: 19px;
  }

  .ms-component[data-component="footer"] .ms-footer-credit {
    max-width: 300px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .ms-component[data-component="footer"] .ms-footer-content {
    width: 90%;
  }

  .ms-component[data-component="footer"] .ms-footer-back-top {
    padding: 0.7rem 0.9rem;

    font-size: 0.64rem;
  }

  .ms-component[data-component="footer"] .ms-footer-social a {
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ms-component[data-component="footer"] .ms-footer-content,
  .ms-component[data-component="footer"] .ms-footer-divider,
  .ms-component[data-component="footer"] .ms-footer-back-top,
  .ms-component[data-component="footer"] .ms-footer-back-top svg,
  .ms-component[data-component="footer"] .ms-footer-social a,
  .ms-component[data-component="footer"] .ms-footer-credit-link::after {
    animation: none !important;

    transition: none !important;

    transform: none !important;
  }

  .ms-component[data-component="footer"] .ms-footer-content,
  .ms-component[data-component="footer"] .ms-footer-divider {
    opacity: 1;
  }
}