```css
/* =========================================================
   JEY / VALCINTEX — FOOTER PÚBLICO
   ---------------------------------------------------------
   Este archivo controla exclusivamente el diseño visual
   del footer público de la tienda.

   Incluye:
   1. Configuración general
   2. Marca y contacto
   3. Redes sociales
   4. Columnas de navegación
   5. Horarios
   6. Suscripción
   7. Mapa
   8. Copyright
   9. Botón flotante de WhatsApp
   10. Diseño responsive
   ========================================================= */


/* =========================================================
   1. CONFIGURACIÓN GENERAL Y VARIABLES
   ========================================================= */

.footer {

  /* -------------------------------------------------------
     COLORES PRINCIPALES DEL FOOTER
     ------------------------------------------------------- */

  /* Fondo principal */
  --footer-bg: #0b0a0b;

  /* Segundo tono utilizado en el degradado */
  --footer-bg-2: #130d12;

  /* Color principal del texto */
  --footer-text: #ffffff;

  /* Color de textos secundarios */
  --footer-muted: #a9a1a7;

  /* Color de textos pequeños */
  --footer-soft: #777077;

  /* Líneas divisorias */
  --footer-line: rgba(255, 255, 255, .10);

  /* Color de marca JEY */
  --footer-brand: #9d005d;


  /* -------------------------------------------------------
     TAMAÑOS DE TEXTO
     ------------------------------------------------------- */

  /* Texto normal */
  --footer-text-size: 12px;

  /* Texto pequeño */
  --footer-small-size: 11px;

  /* Texto muy pequeño */
  --footer-xs-size: 10px;


  /* -------------------------------------------------------
     CONFIGURACIÓN DEL FOOTER
     ------------------------------------------------------- */

  /* Permite posicionar elementos internos */
  position: relative;

  /* Ocupa todo el ancho disponible */
  width: 100%;

  /* Elimina margen exterior */
  margin: 0;

  /* Elimina padding general */
  padding: 0;

  /* Evita que elementos decorativos sobresalgan */
  overflow: hidden;

  /* Fondo oscuro con detalles en color de marca */
  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(157, 0, 93, .18),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 100%,
      rgba(157, 0, 93, .08),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      var(--footer-bg) 0%,
      var(--footer-bg-2) 55%,
      var(--footer-bg) 100%
    );

  /* Color general de los textos */
  color: var(--footer-text);

  /* Fuente general del footer */
  font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   2. EFECTO DECORATIVO DEL FONDO
   ========================================================= */

.footer::before {

  /* Crea una capa decorativa */
  content: "";

  /* Ocupa todo el footer */
  position: absolute;
  inset: 0;

  /* No bloquea botones ni enlaces */
  pointer-events: none;

  /* Crea una cuadrícula muy sutil */
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .018) 1px,
      transparent 1px
    );

  /* Tamaño de la cuadrícula */
  background-size: 70px 70px;

  /* Hace que la cuadrícula desaparezca progresivamente */
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, .55) 40%,
      transparent 100%
    );
}


/* =========================================================
   3. CONFIGURACIÓN GENERAL DE LOS ENLACES
   ========================================================= */

.footer a {

  /* Utiliza el color definido por cada sección */
  color: inherit;

  /* Elimina el subrayado */
  text-decoration: none;
}


/* =========================================================
   4. BLOQUE PRINCIPAL DEL FOOTER
   ========================================================= */

.footer-top {

  /* Mantiene el contenido por encima del fondo decorativo */
  position: relative;
  z-index: 1;

  /* Ancho máximo del contenido */
  width: min(1380px, calc(100% - 64px));

  /* Centra el contenido */
  margin: 0 auto;

  /* Espaciado superior e inferior */
  padding: 54px 0 48px;

  /* Distribuye las secciones en columnas */
  display: grid;

  /* Distribución de las cinco áreas principales */
  grid-template-columns:
    1.45fr
    .95fr
    .85fr
    1.35fr
    1.2fr;

  /* Separación entre columnas */
  gap: 34px;

  /* Línea inferior */
  border-bottom: 1px solid var(--footer-line);
}


/* =========================================================
   5. MARCA JEY
   ========================================================= */

.footer-brand-title {

  /* Coloca el logo y nombre en línea */
  display: flex;

  /* Centra verticalmente */
  align-items: center;

  /* Separación entre logo y texto */
  gap: 11px;

  /* Espacio inferior */
  margin-bottom: 15px;
}


/* Círculo del logo JEY */

.footer-brand-jey {

  /* Centra las letras */
  display: grid;
  place-items: center;

  /* Tamaño del círculo */
  width: 54px;
  height: 54px;

  /* Borde blanco */
  border: 2px solid #fff;

  /* Hace el elemento circular */
  border-radius: 50%;

  /* Color del texto */
  color: #fff;

  /* Fuente del logo */
  font-family: Georgia, serif;

  /* Tamaño de JEY */
  font-size: 24px;

  /* Grosor */
  font-weight: 900;

  /* Estilo inclinado */
  font-style: italic;

  /* Evita problemas de altura */
  line-height: 1;
}


/* Nombre de la marca */

.footer-brand-name {

  /* Color blanco */
  color: #fff;

  /* Tamaño ligeramente mayor */
  font-size: 18px;

  /* Grosor */
  font-weight: 800;

  /* Reduce el espacio entre líneas */
  line-height: .95;

  /* Ajusta el espacio entre letras */
  letter-spacing: -.5px;
}


/* Descripción de la marca */

.footer-brand-text {

  /* Limita el ancho del texto */
  max-width: 290px;

  /* Espaciado */
  margin: 0 0 22px;

  /* Color secundario */
  color: var(--footer-muted);

  /* Aumentamos ligeramente el tamaño */
  font-size: 12px;

  /* Altura de línea */
  line-height: 1.7;
}


/* =========================================================
   6. INFORMACIÓN DE CONTACTO
   ========================================================= */

.footer-contact {

  /* Coloca cada contacto en una fila */
  display: grid;

  /* Separación entre contactos */
  gap: 10px;
}


.footer-contact a {

  /* Icono y texto en una misma línea */
  display: flex;

  /* Centra verticalmente */
  align-items: center;

  /* Separación */
  gap: 9px;

  /* Color */
  color: #aaa3a8;

  /* Texto ligeramente mayor */
  font-size: 11px;

  /* Animación */
  transition:
    color .2s ease,
    transform .2s ease;
}


/* Efecto al pasar el mouse */

.footer-contact a:hover {

  /* Cambia a blanco */
  color: #fff;

  /* Desplaza ligeramente el elemento */
  transform: translateX(2px);
}


/* Iconos del contacto */

.footer-contact-icon {

  /* Ancho fijo para mantener alineación */
  width: 20px;

  /* Color JEY */
  color: var(--footer-brand);

  /* Centra el icono */
  text-align: center;

  /* Tamaño */
  font-size: 15px;
}


/* =========================================================
   7. REDES SOCIALES
   ========================================================= */

.footer-socials {

  /* Redes en fila */
  display: flex;

  /* Separación */
  gap: 8px;

  /* Espacio superior */
  margin-top: 20px;
}


.footer-socials a {

  /* Centra cada icono */
  display: grid;
  place-items: center;

  /* Tamaño del círculo */
  width: 36px;
  height: 36px;

  /* Borde */
  border: 1px solid rgba(255, 255, 255, .15);

  /* Forma circular */
  border-radius: 50%;

  /* Color */
  color: #eee;

  /* Tamaño */
  font-size: 12px;

  /* Animación */
  transition: .2s ease;
}


/* Hover de redes */

.footer-socials a:hover {

  /* Fondo JEY */
  background: var(--footer-brand);

  /* Borde JEY */
  border-color: var(--footer-brand);

  /* Sube ligeramente */
  transform: translateY(-2px);
}


/* =========================================================
   8. COLUMNAS DEL FOOTER
   ========================================================= */

.footer-column,
.footer-subscribe {

  /* Permite que las columnas se adapten */
  min-width: 0;
}


/* Títulos de las columnas */

.footer-column h3,
.footer-subscribe h2 {

  /* Elimina margen superior */
  margin: 0 0 18px;

  /* Blanco */
  color: #fff;

  /* Grosor */
  font-weight: 800;
}


/* Títulos pequeños */

.footer-column h3 {

  /* Permite colocar la línea debajo */
  position: relative;

  /* Espacio inferior */
  padding-bottom: 10px;

  /* Tamaño */
  font-size: 12px;

  /* Separación de letras */
  letter-spacing: 1.6px;

  /* Mayúsculas */
  text-transform: uppercase;
}


/* Línea decorativa debajo de los títulos */

.footer-column h3::after {

  /* Crea la línea */
  content: "";

  /* Posición */
  position: absolute;

  /* Comienza a la izquierda */
  left: 0;

  /* Se ubica debajo del título */
  bottom: 0;

  /* Ancho */
  width: 28px;

  /* Grosor */
  height: 2px;

  /* Bordes redondeados */
  border-radius: 2px;

  /* Color JEY */
  background: var(--footer-brand);
}


/* Enlaces de las columnas */

.footer-column > a,
.footer-column-double a {

  /* Cada enlace ocupa su propia línea */
  display: block;

  /* Evita que el enlace sea más ancho de su contenido */
  width: max-content;

  /* Nunca supera el ancho disponible */
  max-width: 100%;

  /* Separación */
  margin: 0 0 11px;

  /* Color */
  color: #989198;

  /* Tamaño aumentado */
  font-size: 11px;

  /* Altura */
  line-height: 1.4;

  /* Animación */
  transition:
    color .2s ease,
    transform .2s ease;
}


/* Hover de los enlaces */

.footer-column > a:hover,
.footer-column-double a:hover {

  /* Blanco */
  color: #fff;

  /* Desplazamiento */
  transform: translateX(3px);
}


/* =========================================================
   9. HORARIOS
   ========================================================= */

.footer-schedule {

  /* Lista vertical */
  display: grid;

  /* Separación */
  gap: 17px;
}


.footer-schedule div {

  /* Coloca nombre y horario uno debajo del otro */
  display: grid;

  /* Separación */
  gap: 5px;

  /* Espacio inferior */
  padding-bottom: 13px;

  /* Línea divisoria */
  border-bottom: 1px solid var(--footer-line);
}


/* El último horario no lleva línea */

.footer-schedule div:last-child {
  border-bottom: 0;
}


/* Día */

.footer-schedule strong {

  /* Color */
  color: #e9e5e8;

  /* Tamaño */
  font-size: 11px;

  /* Grosor */
  font-weight: 700;
}


/* Horario */

.footer-schedule span {

  /* Color secundario */
  color: var(--footer-soft);

  /* Tamaño */
  font-size: 10px;

  /* Altura */
  line-height: 1.4;
}


/* =========================================================
   10. COLUMNA AYUDA + SERVICIO
   ========================================================= */

.footer-column-double {

  /* Divide Ayuda y Servicio en dos columnas */
  display: grid;

  /* Dos columnas iguales */
  grid-template-columns: 1fr 1fr;

  /* Separación */
  gap: 22px;
}


.footer-column-double h3 {

  /* Separación inferior */
  margin-bottom: 16px;
}


/* =========================================================
   11. SUSCRIPCIÓN
   ========================================================= */

.footer-subscribe {

  /* Separación visual de la columna anterior */
  padding-left: 22px;

  /* Línea vertical */
  border-left: 1px solid var(--footer-line);
}


/* Título Suscríbete */

.footer-subscribe h2 {

  /* Tamaño */
  font-size: 28px;

  /* Ajuste entre letras */
  letter-spacing: -.8px;
}


/* Descripción */

.footer-subscribe > p {

  /* Elimina margen superior */
  margin: 0 0 17px;

  /* Ancho máximo */
  max-width: 250px;

  /* Color */
  color: var(--footer-muted);

  /* Tamaño */
  font-size: 11px;

  /* Altura */
  line-height: 1.55;
}


/* =========================================================
   12. FORMULARIO DE SUSCRIPCIÓN
   ========================================================= */

.footer-form {

  /* Campos uno debajo del otro */
  display: grid;

  /* Separación */
  gap: 8px;
}


/* Campos */

.footer-form input {

  /* Ocupa todo el ancho */
  width: 100%;

  /* Altura */
  height: 40px;

  /* Espacio interno */
  padding: 0 11px;

  /* Borde */
  border: 1px solid rgba(255, 255, 255, .12);

  /* Bordes redondeados */
  border-radius: 8px;

  /* Elimina borde del navegador */
  outline: none;

  /* Fondo */
  background: rgba(0, 0, 0, .35);

  /* Texto */
  color: #fff;

  /* Tamaño */
  font-size: 11px;

  /* Fuente */
  font-family: inherit;
}


/* Texto de ayuda */

.footer-form input::placeholder {
  color: #716b70;
}


/* Campo seleccionado */

.footer-form input:focus {
  border-color: var(--footer-brand);
}


/* Botón */

.footer-form button {

  /* Altura mínima */
  min-height: 40px;

  /* Espacio lateral */
  padding: 0 12px;

  /* Sin borde */
  border: 0;

  /* Bordes redondeados */
  border-radius: 8px;

  /* Fondo blanco */
  background: #fff;

  /* Texto oscuro */
  color: #111;

  /* Tamaño */
  font-size: 10px;

  /* Grosor */
  font-weight: 900;

  /* Separación de letras */
  letter-spacing: .3px;

  /* Cursor */
  cursor: pointer;

  /* Animación */
  transition: .2s ease;
}


/* Hover del botón */

.footer-form button:hover {

  /* Fondo JEY */
  background: var(--footer-brand);

  /* Texto blanco */
  color: #fff;

  /* Movimiento */
  transform: translateY(-1px);
}


/* =========================================================
   13. ENLACES LEGALES
   ========================================================= */

.footer-legal {

  /* Coloca los enlaces en fila */
  display: flex;

  /* Permite bajar a otra línea */
  flex-wrap: wrap;

  /* Separación */
  gap: 8px 12px;

  /* Margen superior */
  margin-top: 16px;
}


.footer-legal a {

  /* Color */
  color: #777077;

  /* Tamaño */
  font-size: 9px;

  /* Animación */
  transition: color .2s ease;
}


.footer-legal a:hover {
  color: #fff;
}


/* =========================================================
   14. MAPA
   ========================================================= */

.footer-map-section {

  /* Mantiene el mapa por encima del fondo */
  position: relative;
  z-index: 1;

  /* Espaciado */
  padding: 30px 0 34px;
}


/* Contenedor del mapa */

.footer-map-card {

  /* Posición relativa para el botón */
  position: relative;

  /* Ancho máximo */
  width: min(900px, calc(100% - 64px));

  /* Altura */
  height: 210px;

  /* Centrado */
  margin: 0 auto;

  /* Oculta contenido sobrante */
  overflow: hidden;

  /* Borde */
  border: 1px solid rgba(255, 255, 255, .12);

  /* Bordes redondeados */
  border-radius: 18px;

  /* Fondo */
  background: #161316;

  /* Sombra */
  box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
}


/* Iframe de Google Maps */

.footer-map-card iframe {

  /* Evita espacios extra */
  display: block;

  /* Ocupa todo el contenedor */
  width: 100%;
  height: 100%;

  /* Sin borde */
  border: 0;

  /* Ajuste visual */
  filter: saturate(.82) contrast(.94);
}


/* Botón del mapa */

.footer-map-button {

  /* Posición sobre el mapa */
  position: absolute;

  /* Distancia derecha */
  right: 14px;

  /* Distancia inferior */
  bottom: 14px;

  /* Alineación */
  display: inline-flex;
  align-items: center;

  /* Altura */
  min-height: 38px;

  /* Espaciado */
  padding: 0 14px;

  /* Borde */
  border: 1px solid rgba(255, 255, 255, .16);

  /* Bordes */
  border-radius: 9px;

  /* Fondo */
  background: rgba(10, 10, 10, .88);

  /* Efecto transparente */
  backdrop-filter: blur(10px);

  /* Texto */
  color: #fff;

  /* Tamaño */
  font-size: 10px;

  /* Grosor */
  font-weight: 800;

  /* Sombra */
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);

  /* Animación */
  transition: .2s ease;
}


.footer-map-button:hover {

  /* Fondo JEY */
  background: var(--footer-brand);

  /* Movimiento */
  transform: translateY(-2px);
}


/* =========================================================
   15. COPYRIGHT
   ========================================================= */

.footer-bottom {

  /* Mantiene el contenido sobre el fondo */
  position: relative;
  z-index: 1;

  /* Altura mínima */
  min-height: 62px;

  /* Ancho */
  width: min(1380px, calc(100% - 64px));

  /* Centrado */
  margin: 0 auto;

  /* Sin padding */
  padding: 0;

  /* Alineación */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Separación */
  gap: 20px;

  /* Línea */
  border-top: 1px solid var(--footer-line);

  /* Color */
  color: #706a70;

  /* Tamaño */
  font-size: 10px;
}


/* Nombre de JEY */

.footer-bottom span:last-child {
  color: #8b8389;
}


/* =========================================================
   16. TABLET
   ========================================================= */

@media (max-width: 1150px) {

  /* Reducimos el número de columnas */
  .footer-top {
    grid-template-columns:
      1.35fr
      .9fr
      1fr
      1.25fr;
  }


  /* Suscripción ocupa toda la fila */

  .footer-subscribe {

    /* Ocupa todas las columnas */
    grid-column: 1 / -1;

    /* Espacio superior */
    padding: 25px 0 0;

    /* Elimina línea vertical */
    border-left: 0;

    /* Agrega línea horizontal */
    border-top: 1px solid var(--footer-line);

    /* Diseño en dos columnas */
    display: grid;

    grid-template-columns: 1fr 1.4fr;

    /* Separación */
    column-gap: 30px;

    /* Alineación */
    align-items: start;
  }


  .footer-subscribe h2 {
    grid-column: 1;
  }


  .footer-subscribe > p,
  .footer-form,
  .footer-legal {
    grid-column: 2;
  }


  .footer-subscribe > p {
    margin-top: -47px;
  }


  /* Formulario horizontal en tablet */

  .footer-form {
    grid-row: 2;

    grid-template-columns:
      1fr
      1.4fr
      auto;
  }


  .footer-legal {
    grid-row: 3;
  }
}


/* =========================================================
   17. MÓVIL
   ========================================================= */

@media (max-width: 800px) {

  /* Footer principal */
  .footer-top {

    /* Reduce los márgenes laterales */
    width: calc(100% - 36px);

    /* Espaciado */
    padding: 42px 0 35px;

    /* Dos columnas */
    grid-template-columns: 1fr 1fr;

    /* Separación */
    gap: 34px 22px;
  }


  /* La marca ocupa todo el ancho */

  .footer-brand {
    grid-column: 1 / -1;
  }


  /* Ayuda y servicio */

  .footer-column-double {

    /* Una columna */
    grid-template-columns: 1fr;

    /* Separación */
    gap: 25px;
  }


  /* Suscripción */

  .footer-subscribe {

    /* Ocupa todo el ancho */
    grid-column: 1 / -1;

    /* Diseño normal */
    display: block;

    /* Espacio */
    padding: 28px 0 0;
  }


  .footer-subscribe > p {
    margin: 0 0 15px;
  }


  /* Formulario vertical */

  .footer-form {
    grid-template-columns: 1fr;
  }


  /* Mapa */

  .footer-map-card {

    /* Ancho */
    width: calc(100% - 36px);

    /* Altura */
    height: 190px;
  }


  /* Copyright */

  .footer-bottom {

    /* Ancho */
    width: calc(100% - 36px);

    /* Altura */
    min-height: 76px;

    /* Alineación vertical */
    align-items: flex-start;

    justify-content: center;

    flex-direction: column;

    /* Separación */
    gap: 6px;

    /* Espaciado */
    padding: 17px 0;
  }
}


/* =========================================================
   18. MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 480px) {

  /* Una sola columna */

  .footer-top {

    /* Márgenes más pequeños */
    width: calc(100% - 28px);

    /* Una columna */
    grid-template-columns: 1fr;

    /* Separación */
    gap: 28px;
  }


  .footer-brand {
    grid-column: auto;
  }


  /* Ayuda y servicio vuelven a dos columnas */

  .footer-column-double {

    grid-template-columns: 1fr 1fr;

    gap: 16px;
  }


  .footer-subscribe {
    grid-column: auto;
  }


  /* Mapa más pequeño */

  .footer-map-card {

    width: calc(100% - 28px);

    height: 175px;

    border-radius: 14px;
  }


  /* Botón del mapa */

  .footer-map-button {

    /* Se mueve a la izquierda */
    left: 12px;

    /* Desactiva posición derecha */
    right: auto;

    /* Distancia inferior */
    bottom: 12px;
  }


  /* Copyright */

  .footer-bottom {

    width: calc(100% - 28px);

    font-size: 9px;
  }
}


/* =========================================================
   19. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================= */

.jey-whatsapp-float {

  /* Se mantiene fijo en pantalla */
  position: fixed;

  /* Distancia derecha */
  right: 24px;

  /* Distancia inferior */
  bottom: 24px;

  /* Se mantiene por encima del resto */
  z-index: 10050;

  /* Icono y texto en línea */
  display: flex;
  align-items: center;

  /* Separación */
  gap: 9px;

  /* Altura */
  min-height: 52px;

  /* Espaciado */
  padding: 0 17px 0 12px;

  /* Forma de cápsula */
  border-radius: 999px;

  /* Verde oficial de WhatsApp */
  background: #25D366;

  /* Texto blanco */
  color: #fff !important;

  /* Elimina decoración */
  text-decoration: none !important;

  /* Sombra */
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);

  /* Tamaño */
  font-size: 13px;

  /* Grosor */
  font-weight: 800;

  /* Animación */
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}


/* Hover del botón */

.jey-whatsapp-float:hover {

  /* Verde ligeramente más oscuro */
  background: #20bd5a;

  /* Mantiene texto blanco */
  color: #fff !important;

  /* Sube ligeramente */
  transform: translateY(-3px);

  /* Sombra más grande */
  box-shadow: 0 14px 34px rgba(0, 0, 0, .27);
}


/* Círculo del icono */

.jey-whatsapp-float__icon {

  /* Tamaño */
  width: 38px;
  height: 38px;

  /* Centra SVG */
  display: grid;
  place-items: center;

  /* Circular */
  border-radius: 50%;

  /* Fondo transparente */
  background: rgba(255, 255, 255, .14);
}


/* SVG */

.jey-whatsapp-float__icon svg {

  /* Evita espacios */
  display: block;
}


/* Texto WhatsApp */

.jey-whatsapp-float__text {

  /* Evita que el texto se divida */
  white-space: nowrap;
}


/* =========================================================
   20. WHATSAPP EN MÓVIL
   ========================================================= */

@media (max-width: 600px) {

  .jey-whatsapp-float {

    /* Distancia derecha */
    right: 16px;

    /* Distancia inferior */
    bottom: 16px;

    /* Ancho */
    width: 54px;

    /* Alto */
    height: 54px;

    /* Altura mínima */
    min-height: 54px;

    /* Elimina padding */
    padding: 0;

    /* Centra el icono */
    justify-content: center;
  }


  .jey-whatsapp-float__icon {

    /* Tamaño */
    width: 42px;
    height: 42px;

    /* Elimina fondo */
    background: transparent;
  }


  .jey-whatsapp-float__icon svg {

    /* Icono ligeramente mayor */
    width: 30px;
    height: 30px;
  }


  /* Ocultamos la palabra WhatsApp */
  /* para dejar solamente el botón circular */

  .jey-whatsapp-float__text {
    display: none;
  }
}