/* ==========================================================================
   MAVERICK 1997 — footer.css
   Footer negro + flotantes (WhatsApp y volver arriba).

   Valores calcados del prototipo (referencia/Maverick Tienda.dc.html,
   bloques footStyle/footInner/footGrid/... y waStyle/toTopStyle).

   Breakpoints reales del prototipo:
     narrow = innerWidth < 760px   -> @media (max-width:759.98px)
     mob    = innerWidth < 1080px  -> el tercer tramo arranca en 1080px
   El secundario acá es 1080px, NO 1024px: lo manda el prototipo.

   ⚠️ Sin etiquetas SVG en este archivo (la CDN de Hostinger bloquea el
   guardado por editor para siempre). Los íconos viven en inc/icons.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor
   -------------------------------------------------------------------------- */

.mvk-footer {
  background: var(--mvk-black);
  color: var(--mvk-white);
  overflow: hidden;
  padding: 34px 16px 20px;            /* < 760px: el inline es 16px fijo */
}

.mvk-footer__inner {
  max-width: var(--mvk-max-wide);     /* 1560px, no --mvk-max */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* --------------------------------------------------------------------------
   Grilla de columnas — 5 hijos: marca, Tienda, Ayuda, Locales, Pagos y envíos
   -------------------------------------------------------------------------- */

.mvk-footer__grid {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* --------------------------------------------------------------------------
   Bloque de marca
   -------------------------------------------------------------------------- */

.mvk-footer__brand {
  display: flex;
  flex-direction: row;                /* celular: logo y @mvck1997 en fila */
  flex-wrap: wrap;                    /* si no entran, bajan: nada se corta */
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.mvk-footer__logo.mvk-footer__logo {
  height: 46px;
  width: auto;
  display: block;
  margin: 0;
  image-rendering: auto;
}

.mvk-footer__tagline {
  display: none;                      /* se oculta bajo 760px */
  margin: 0;
  max-width: 26ch;                    /* en ch, no en px */
  font: 300 14px/1.7 var(--mvk-sans);
  color: rgba(255, 255, 255, .5);
  text-wrap: pretty;
}

/* Subrayado con border-bottom, NO con text-decoration */
.mvk-footer__ig {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  flex: none;
  white-space: nowrap;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  color: var(--mvk-white);
  font: 500 10px/1 var(--mvk-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .3s ease;
}

.mvk-footer__ig:hover,
.mvk-footer__ig:focus-visible {
  color: var(--mvk-white);            /* no cambia el color, solo el borde */
  border-color: var(--mvk-white);
}

/* --------------------------------------------------------------------------
   Títulos y links de columna
   -------------------------------------------------------------------------- */

.mvk-footer__h {
  margin: 0 0 14px;
  font: 500 9.5px/1 var(--mvk-sans);  /* rótulo del footer: no es Oswald */
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
}

.mvk-footer__h--shop { display: none; }   /* el h3 "Tienda" se oculta en celular */

.mvk-footer__link {
  color: rgba(255, 255, 255, .62);
  font: 400 13px/1.9 var(--mvk-sans);
  text-decoration: none;
  width: fit-content;
  transition: color .3s ease;
}

.mvk-footer__link:hover,
.mvk-footer__link:focus-visible {
  color: var(--mvk-white);
}

/* Variante <button>, por si los legales se resuelven con overlay */
button.mvk-footer__link {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Columna Tienda — en celular pasa a fila envuelta y centrada
   -------------------------------------------------------------------------- */

.mvk-footer__shop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* --------------------------------------------------------------------------
   Ayuda y Pagos y envíos — salen del PHP siempre, se ocultan por CSS
   -------------------------------------------------------------------------- */

.mvk-footer__col--hide { display: none; }

/* --------------------------------------------------------------------------
   Columna Locales
   -------------------------------------------------------------------------- */

.mvk-footer__locales {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: center;
  text-align: center;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.mvk-footer__hours {
  margin-top: 12px;
  font: 300 12.5px/1.7 var(--mvk-sans);
  color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Barra legal
   -------------------------------------------------------------------------- */

.mvk-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 72px;               /* aire para el flotante de WhatsApp */
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Orden del prototipo. DOM: 1) credit 2) copy 3) links.
   En celular queda: links, crédito, copyright. */
.mvk-footer__credit { order: 2; }
.mvk-footer__copy   { order: 3; }
.mvk-footer__links  { order: 1; }

.mvk-footer__copy {
  font: 300 11px/1.6 var(--mvk-sans);
  color: rgba(255, 255, 255, .5);
}

.mvk-footer__credit {
  flex: none;
  text-align: center;
  color: rgba(255, 255, 255, .5);
  font: 300 11px/1.6 var(--mvk-sans);
  text-decoration: none;
  transition: color .3s ease;
}

.mvk-footer__credit:hover,
.mvk-footer__credit:focus-visible {
  color: var(--mvk-white);
}

.mvk-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}

.mvk-footer__legal-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(255, 255, 255, .55);    /* .55, no .5 */
  font: 300 11px/1.6 var(--mvk-sans);
  cursor: pointer;
  transition: color .3s ease;
}

.mvk-footer__legal-btn:hover,
.mvk-footer__legal-btn:focus-visible {
  color: var(--mvk-white);
}

/* ==========================================================================
   >= 760px — escritorio chico: dos columnas
   ========================================================================== */

@media (min-width: 760px) {

  .mvk-footer {
    padding: clamp(56px, 8vw, 120px) var(--mvk-pad) clamp(20px, 2.4vw, 32px);
  }

  .mvk-footer__inner { gap: clamp(44px, 6vw, 92px); }

  .mvk-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 5vw, 80px);
  }

  .mvk-footer__brand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 22px;
    width: auto;
  }

  .mvk-footer__logo.mvk-footer__logo { height: clamp(52px, 4.6vw, 68px); }
  .mvk-footer__tagline { display: block; }

  .mvk-footer__ig {
    font: 500 11px/1 var(--mvk-sans);
    letter-spacing: .2em;
  }

  .mvk-footer__h--shop { display: block; }

  .mvk-footer__shop {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    padding-top: 0;
    border-top: 0;
  }

  .mvk-footer__col--hide {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mvk-footer__locales {
    align-items: flex-start;
    text-align: left;
    padding-top: 0;
    border-top: 0;
  }

  .mvk-footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 16px 28px;
    justify-content: space-between;
    padding-top: clamp(16px, 2vw, 24px);
    padding-bottom: 0;
  }

  /* copy y links empatan en order 1 -> el orden visual real es
     copyright | links legales | Designed by Larrondo (a la derecha) */
  .mvk-footer__copy   { order: 1; }
  .mvk-footer__credit { flex: 1 0 auto; }
  .mvk-footer__links  { gap: 22px; }
}

/* ==========================================================================
   >= 1080px — grilla completa de 5 columnas (la primera pesa 1.5fr)
   ========================================================================== */

@media (min-width: 1080px) {
  .mvk-footer__grid {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Flotante de WhatsApp — círculo en celular, cápsula de 760px para arriba

   ⚠️ DESVÍO CONSCIENTE DE LAS REGLAS 1 Y 2, DECIDIDO Y ESCRITO:
   se mantiene lo que hace el prototipo (waStyle, l.1853-1854 de
   referencia/Maverick Tienda.dc.html), porque el handoff dice que ante
   discrepancias manda el prototipo.
     · Radio 26px sobre 52px de alto en escritorio: es una cápsula, no el 50%
       que pide la regla 1. La regla nombra al botón de WhatsApp entre las
       excepciones circulares, pero el prototipo lo dibuja como pastilla con
       el label al lado; abajo de 760px sí es un círculo de 54px al 50%.
     · Verde #25D366 en el disco del ícono y en los dos box-shadow: es el
       verde de la marca WhatsApp, no un tercer acento del sistema (el rojo
       sigue siendo el único acento propio, y sigue solo en la cuota).
   Si el cliente prefiere aplicar la regla al pie de la letra: border-radius
   50% + width/height 54px en el bloque de >=760px, .mvk-wa__label a
   .screen-reader-text, y --mvk-wa-green -> var(--mvk-white).
   ========================================================================== */

.mvk-wa {
  --mvk-wa-green: #25D366;            /* verde de WhatsApp, ver nota de arriba */

  position: fixed;
  right: 14px;                        /* < 760px: fijos, sin clamp */
  bottom: 14px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  background: var(--mvk-black);
  color: var(--mvk-white);
  font: 600 11.5px/1 var(--mvk-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  /* Sombra propia: NO usar --mvk-shadow-fab, el prototipo usa otra */
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(37, 211, 102, .28);
  transition: transform .3s var(--mvk-ease), box-shadow .3s ease;
}

.mvk-wa:hover,
.mvk-wa:focus-visible {
  color: var(--mvk-white);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(37, 211, 102, .6);
}

.mvk-wa__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mvk-wa-green);
  /* El glifo va NEGRO sobre el verde, como el prototipo (l.607: fill #0C0B0B).
     El ícono de inc/icons.php usa currentColor, así que alcanza con fijar el
     color acá: si se hereda el de .mvk-wa sale blanco sobre verde. */
  color: var(--mvk-black);
  flex: none;
  box-shadow: 0 0 0 1px rgba(37, 211, 102, .35), 0 0 14px rgba(37, 211, 102, .45);
}

.mvk-wa__icon svg { width: 17px; height: 17px; }

.mvk-wa__label { display: none; }     /* < 760px: solo el ícono */

@media (min-width: 760px) {
  .mvk-wa {
    right: clamp(14px, 2vw, 26px);
    bottom: clamp(14px, 2vw, 26px);
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: 52px;
    padding: 0 20px;
    border-radius: 26px;              /* = height/2, cápsula perfecta */
  }

  .mvk-wa__label { display: inline; }
}

/* ==========================================================================
   Botón volver arriba — siempre por encima del de WhatsApp
   ========================================================================== */

.mvk-totop {
  position: fixed;
  right: 16px;
  bottom: 86px;                       /* WA: 14 + 54 = 68 -> 18px de aire */
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--mvk-black);
  color: var(--mvk-white);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
  /* Control redundante, no contenido: si el JS falla queda oculto, nunca
     tapando la pantalla. Es la única excepción admitida al no-opacity-0, y
     el estado visible lo pone la clase .is-visible desde ui.js.

     visibility: hidden además de opacity + pointer-events: sin eso el botón
     apagado sigue en el orden de foco y el tabulador aterriza en un control
     invisible (WCAG 2.4.3 y 2.4.7). pointer-events solo frena al mouse.
     visibility se puede transicionar: como es discreta, al ocultar espera los
     .4s del fade y recién ahí salta a hidden, así que la salida no se corta. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: visibility .4s ease, opacity .4s ease, transform .5s var(--mvk-ease), background .3s ease, color .3s ease;
}

.mvk-totop.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mvk-totop:hover,
.mvk-totop:focus-visible {
  background: var(--mvk-white);
  color: var(--mvk-black);
}

.mvk-totop svg { width: 14px; height: 14px; }

@media (min-width: 760px) {
  .mvk-totop {
    right: 26px;
    bottom: 104px;                    /* WA: 26 + 52 = 78 -> 26px de aire */
  }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mvk-wa,
  .mvk-totop,
  .mvk-footer__link,
  .mvk-footer__ig,
  .mvk-footer__credit,
  .mvk-footer__legal-btn {
    transition: none;
  }

  .mvk-totop,
  .mvk-totop.is-visible {
    transform: none;
  }

  /* Sin override de opacity: el bloque de main.css ya no fuerza
     opacity:1 !important sobre todo [class*="mvk-"], solo sobre lo que anima
     de entrada (.mvk-reveal y las clases *-in / *-reveal), y .mvk-totop no
     entra en ninguna. El estado oculto de arriba sigue valiendo tal cual. */
}