/* ==========================================================================
   COMPONENTS — Nav · Drawer · Buttons · Ticker · Footer
   Shared across all pages. Loaded async (non-blocking).
   ========================================================================== */

/* ── Navigation ───────────────────────────────────────────────────────────── */

.mv-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  transition:
    background-color var(--dur-mid) var(--ease-out-expo),
    backdrop-filter var(--dur-mid) var(--ease-out-expo),
    transform var(--dur-mid) var(--ease-out-expo);
}

/* Contenedor con max-width centrado — así logo/botón guardan una distancia
   proporcional a los enlaces (como la referencia) en vez de un margin fijo
   que se ve exagerado en pantallas más chicas o con menos enlaces. */
.mv-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Home y Celebra: full-bleed, sin el max-width centrado — mismo criterio
   que el footer (fondo a todo el ancho, solo el gutter como margen). El
   resto de páginas mantiene el contenedor centrado de arriba. */
.page-home .mv-nav__inner,
.page-bachelor .mv-nav__inner {
  max-width: none;
  margin-inline: 0;
}

.mv-nav.is-scrolled {
  background-color: rgba(24, 24, 24, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Mobile: se esconde mientras el footer está en pantalla (ver nav.js),
   para que el footer se vea completo sin el nav tapándole una parte. */
.mv-nav.is-hidden {
  transform: translateY(-100%);
}

/* Columnas fijas explícitas — si .mv-nav__pill desaparece (display:none en
   mobile/tablet), el auto-placement del grid metería .mv-nav__right en la
   columna del medio en su lugar. Fijando grid-column no depende de si el
   del medio existe o no. */
.mv-nav__logo  { grid-column: 1; }
.mv-nav__pill  { grid-column: 2; }
.mv-nav__right { grid-column: 3; }

/* Logo */
.mv-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mv-nav__logo img {
  height: 58px;
  width: auto;
}

/* Nav links — solo texto, sin fondo/pill/hover (ver header.php: nav de escritorio) */
.mv-nav__pill {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.mv-nav__link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

/* Efecto "carrete" — el texto sube y una copia (en lima) entra desde
   abajo, como un rodillo de tragamonedas deteniéndose en su lugar. */
.mv-nav__link-reel {
  display: block;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}

.mv-nav__link-face {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
}

/* Sin color por vertical — solo el efecto de carrete, mismo color que el
   resto del link. */
.mv-nav__link-face--dup {
  color: #fff;
}

.mv-nav__link:hover .mv-nav__link-reel {
  transform: translateY(-50%);
}

/* Right zone */
.mv-nav__right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  justify-self: end;
  margin-left: auto;
}

/* CTA — sin acción todavía (href="#"), solo estilo */
.mv-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-out-expo),
    background-color var(--dur-fast) var(--ease-out-expo),
    border-color var(--dur-fast) var(--ease-out-expo);
}

/* Se invierte a sólido en hover — mismo patrón del botón de la referencia */
.mv-nav__cta:hover {
  color: var(--mv-dark);
  background-color: #fff;
  border-color: #fff;
}

.mv-nav__cta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.mv-nav__cta:hover svg {
  transform: translate(2px, -2px) rotate(45deg);
}

/* Hamburger — 2 barras gruesas que giran a X en hover/abierto */
.mv-nav__hamburger {
  display: none;
  position: relative;
  width: 80px;
  height: 80px;
  padding: 0;
}

.mv-nav__hamburger-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 6px;
  background: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--dur-mid) var(--ease-out-expo),
    background-color var(--dur-mid) var(--ease-out-expo);
}

.mv-nav__hamburger-line:nth-child(1) {
  transform: translate(-50%, -50%) translateY(-8px);
}

.mv-nav__hamburger-line:nth-child(2) {
  transform: translate(-50%, -50%) translateY(8px);
}

.mv-nav__hamburger.is-active .mv-nav__hamburger-line {
  background: var(--mv-lime);
}

.mv-nav__hamburger.is-active .mv-nav__hamburger-line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mv-nav__hamburger.is-active .mv-nav__hamburger-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ── Drawer ───────────────────────────────────────────────────────────────── */

.mv-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background-color: var(--mv-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--dur-cinematic) var(--ease-out-expo),
    visibility 0s linear var(--dur-cinematic);
}

.mv-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--dur-cinematic) var(--ease-out-expo),
    visibility 0s linear 0s;
}

/* Barra superior del drawer — mismo layout que .mv-nav en mobile:
   logo a la izquierda, cerrar a la derecha, misma altura/padding. */
.mv-drawer__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
}

.mv-drawer__logo {
  display: flex;
  align-items: center;
}

.mv-drawer__logo img {
  height: 58px;
  width: auto;
}

/* Sin círculo, sin fondo — mismo lenguaje que el hamburguesa: solo las
   barras, gruesas y grandes. */
.mv-drawer__close {
  position: static;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: color var(--dur-fast);
}

.mv-drawer__close svg {
  width: 32px;
  height: 32px;
}

.mv-drawer__close:hover {
  color: var(--mv-lime);
}

.mv-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mv-drawer__link {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.25);
  padding-block: 0.15em;
  transition: color var(--dur-mid) var(--ease-out-expo);
}

.mv-drawer__link:hover {
  color: #fff;
}

.mv-drawer__bottom {
  position: absolute;
  bottom: var(--gutter);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mv-drawer__tagline {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.mv-drawer__social {
  display: flex;
  gap: 1.25rem;
}

.mv-drawer__social a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--dur-fast);
}

.mv-drawer__social a:hover {
  color: var(--mv-red);
}

/* ── Button System ────────────────────────────────────────────────────────── */

.mv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 0.8125rem 1.875rem;
  line-height: 1;
  border: 1px solid transparent;
  transition:
    transform var(--dur-fast) var(--ease-out-expo),
    background-color var(--dur-fast),
    color var(--dur-fast),
    box-shadow var(--dur-mid) var(--ease-out-expo),
    border-color var(--dur-fast);
  white-space: nowrap;
  cursor: pointer;
}

.mv-btn:active { transform: scale(0.97); }

.mv-btn--primary {
  background-color: var(--mv-red);
  color: #fff;
}

.mv-btn--primary:hover {
  background-color: #e03a28;
  box-shadow: 0 8px 28px rgba(255, 69, 49, 0.36);
}

.mv-btn--secondary {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.mv-btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.05);
}

.mv-btn--lime {
  background-color: var(--mv-lime);
  color: var(--mv-dark);
}

.mv-btn--lime:hover {
  background-color: #bfdf2a;
  box-shadow: 0 8px 28px rgba(202, 254, 72, 0.28);
}

.mv-btn--ghost {
  background-color: transparent;
  color: currentColor;
  border-color: currentColor;
  opacity: 0.7;
}

.mv-btn--ghost:hover { opacity: 1; }

/* ── Ticker / Marquee ─────────────────────────────────────────────────────── */

.mv-ticker {
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.07);
  padding-block: 0.875rem;
}

.mv-ticker__track {
  display: flex;
  width: max-content;
  animation: mv-ticker-scroll 52s linear infinite;
}

.mv-ticker__item {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding-inline: 1.5rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mv-ticker__dot {
  color: var(--mv-red);
  font-size: 0.45rem;
  line-height: 1;
}

@keyframes mv-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

/* Misma forma de siempre (color a la izquierda, apagándose a smoke en
   el 45% — nunca llega pleno al borde derecho, ahí vuelven las
   palmeras). Lo único animado ahora es EL COLOR en sí, vía custom
   property registrada (@property) para que interpole suave entre tonos
   de marca en vez de solo lima↔smoke. */
@property --grad-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #d6f5a0;
}

.mv-footer {
  --grad-color: #d6f5a0;
  background-image: linear-gradient(to right, var(--grad-color), var(--mv-smoke) 45%);
  background-size: 200% 100%;
  animation:
    mv-footer-gradient-pos 12s ease infinite,
    mv-footer-gradient-color 28s linear infinite;
  color: var(--mv-dark);
  overflow: hidden;
}

@keyframes mv-footer-gradient-pos {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 15% 0%; }
  100% { background-position: 0% 0%; }
}

@keyframes mv-footer-gradient-color {
  0%, 100% { --grad-color: #d6f5a0; }
  14%      { --grad-color: #f3e3a8; }
  28%      { --grad-color: #ffbdb2; }
  42%      { --grad-color: #ffd4fd; }
  57%      { --grad-color: #dba9c0; }
  71%      { --grad-color: #cdfffd; }
  85%      { --grad-color: #b7c9c0; }
}

.mv-footer__layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: calc(100svh - var(--nav-h));
}

/* Body column */
.mv-footer__body {
  padding: 56px 64px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 2.5svh, 2rem);
  position: relative;
  z-index: 2;
}

/* Headline rotator */
.word-slot {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  height: 1.15em;
  white-space: nowrap; /* si la palabra no cabe, salta completa a la siguiente línea — nunca se envuelve internamente (eso es lo que se veía cortado) */
}

.word-inner {
  display: block;
  color: var(--mv-dark);
  white-space: nowrap;
}

.word-slot .letter {
  display: inline-block;
  color: inherit;
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s ease;
}

.word-slot .letter.visible {
  opacity: 1;
  transform: translateY(0);
}

.word-slot .letter.exit {
  opacity: 0;
  transform: translateY(-50px);
  transition: transform 0.4s ease-in, opacity 0.3s ease-in;
}


/* Headline */
.mv-footer__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  color: var(--mv-dark);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0;
}

/* 4-column nav grid */
.mv-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2rem;
  margin-bottom: 0;
}

.mv-footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-dark);
  line-height: 1;
  display: block;
  margin-bottom: 0.625rem;
}

.mv-footer__col-divider {
  display: block;
  width: 100%;
  border-top: 1px dashed var(--mv-dark);
  margin-bottom: 1.125rem;
}

.mv-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
}

.mv-footer__link {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--mv-dark);
  line-height: 1;
  transition: opacity var(--dur-fast);
}

.mv-footer__link:hover {
  opacity: 0.4;
}

.mv-footer__link .letter {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.mv-footer__link .letter.ltr-exit {
  opacity: 0;
  transform: translateY(-50px);
  transition: transform 0.25s ease-in, opacity 0.2s ease-in;
}

.mv-footer__link .letter.ltr-reset {
  opacity: 0;
  transform: translateY(50px);
  transition: none !important;
}

/* Bottom bar */
.mv-footer__bar {
  border-top: 1px dashed var(--mv-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2rem;
  padding: 1rem 0;
}

.mv-footer__bar-col {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.mv-footer__bar-col--fill {
  grid-column: span 2;
  overflow: hidden;
  display: block;
}

.mv-footer__bar-top {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-dark);
  white-space: nowrap;
}

/* El glíph de © en mono se ve chico/delgado frente a los números —
   agrandado para que pese visualmente igual que el año. */
.mv-footer__copy {
  font-size: 1.4em;
  vertical-align: -0.05em;
}

.mv-footer__bar-bot {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-dark);
  white-space: nowrap;
}

.mv-footer__bar-slash {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-dark);
  white-space: normal;
  word-break: break-all;
  display: block;
  overflow: hidden;
}

/* Mega brand */
.mv-footer__brand {
  overflow: hidden;
  line-height: 0.85;
  flex-shrink: 0;
  margin-top: auto;
}

.mv-footer__brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.mv-footer__brand-logo--mobile {
  display: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .mv-nav__pill {
    display: none;
  }

  .mv-nav__hamburger {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .mv-footer__layout {
    grid-template-columns: 1fr;
    min-height: auto; /* con el logo ya pegado a la barra, no forzar alto casi de pantalla completa */
  }

  .mv-footer__body {
    padding: 40px 40px 30px 32px;
  }

  /* En tablet el min-height de .mv-footer__layout es alto, y el
     margin-top:auto del logo (pensado para pegarlo al fondo en
     desktop) deja un hueco enorme antes de llegar a él. Aquí el logo
     va justo debajo de la barra, sin ese salto. */
  .mv-footer__brand {
    margin-top: var(--space-lg);
  }

  .mv-footer__headline {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  }

  .mv-footer__link {
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  }
}

@media (max-width: 768px) {
  .mv-nav__cta {
    display: none;
  }

  /* Costura de 1-2px entre el fondo degradado de FAQ (arriba) y el del
     footer, expuesta en mobile por el cambio dinámico de altura del
     viewport (barra de direcciones). Se solapa hacia arriba para que
     nunca quede un hilo sin pintar entre las dos secciones. */
  .mv-footer {
    margin-top: -2px;
  }

  .mv-footer__layout {
    grid-template-columns: 1fr;
    min-height: auto; /* en mobile mide lo que su contenido necesite, no casi la pantalla completa */
  }

  .mv-footer__body {
    padding: 40px var(--gutter) 0;
  }

  .mv-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }

  .mv-footer__bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
  }

  .mv-footer__bar-col--fill {
    display: none;
  }
}

@media (max-width: 640px) {
  .mv-nav {
    padding-inline: 1.25rem;
  }

  .mv-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mv-footer__headline {
    font-size: clamp(1.25rem, min(5.5vw, 5svh), 4.5rem);
  }

  .mv-footer__body {
    padding-bottom: 20px;
  }

  .mv-footer__brand {
    margin-right: 0;
  }

  .mv-footer__brand-logo--desktop {
    display: none;
  }

  .mv-footer__brand-logo--mobile {
    display: block;
  }

  .mv-footer__link {
    overflow-wrap: break-word;
  }

  .mv-footer__bar-top,
  .mv-footer__bar-bot {
    white-space: normal;
  }
}