/* Footer — Compumundo Store · Vengala Studio */

.cmf {
  --cm-ink: #0b0f19;
  --cm-ink-2: #141a28;
  --cm-line: rgba(255, 255, 255, .09);
  --cm-text: rgba(255, 255, 255, .72);
  --cm-dim: rgba(255, 255, 255, .5);
  --cm-wa: #25d366;
  --cm-ok: #22c55e;
  --cm-ease: cubic-bezier(.2, .8, .2, 1);
  font-family: Montserrat, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
}
.cmf *, .cmf *::before, .cmf *::after { box-sizing: border-box; }
.cmf a { text-decoration: none !important; text-transform: none !important; letter-spacing: normal; }
.cmf svg { display: block; flex: none; }
.cmf h2, .cmf h3, .cmf p, .cmf ul { margin: 0; padding: 0; }
.cmf ul { list-style: none; }
.cmf-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- */
/* Marcas                                                            */
/* ---------------------------------------------------------------- */
.cmf-brands {
  position: relative; overflow: hidden; background: #fff; border-top: 1px solid #eceef2; padding: 30px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cmf-brands-track { display: flex; width: max-content; animation: cmfMarquee 50s linear infinite; }
.cmf-brands:hover .cmf-brands-track { animation-play-state: paused; }
.cmf-brands-set { display: flex; align-items: center; }
.cmf-brand { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 34px; }
/* En gris parejo; a color al pasar el mouse */
.cmf-brand img { display: block; max-width: none; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: .55; transition: filter .25s var(--cm-ease), opacity .25s var(--cm-ease), transform .25s var(--cm-ease); }
.cmf-brand:hover img, a.cmf-brand:focus-visible img { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes cmfMarquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- */
/* Cuerpo                                                            */
/* ---------------------------------------------------------------- */
.cmf-main { background: var(--cm-ink); padding: 64px 0 56px; }
.cmf-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; align-items: start; }

.cmf-about { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.cmf-logo { height: 48px; width: auto; max-width: 220px; object-fit: contain; }
.cmf-lema { font: 600 17px/1.45 Montserrat, sans-serif; color: #fff; max-width: 280px; }
.cmf-contact {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--cm-line); color: #fff !important;
  transition: background .2s var(--cm-ease), border-color .2s var(--cm-ease), transform .2s var(--cm-ease);
}
.cmf-contact:hover { background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .4); transform: translateY(-1px); }
.cmf-contact-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--cm-wa); color: #fff; }
.cmf-contact-ico svg { width: 24px; height: 24px; }
.cmf-contact span:last-child { display: flex; flex-direction: column; gap: 3px; }
.cmf-contact small { font: 600 12px/1 Montserrat, sans-serif; color: var(--cm-dim); }
.cmf-contact b { font: 800 17px/1 Montserrat, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cmf-social { display: flex; gap: 10px; }
.cmf-social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--cm-line); color: #fff !important;
  transition: background .2s var(--cm-ease), transform .2s var(--cm-ease);
}
.cmf-social a:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.cmf-social svg { width: 19px; height: 19px; }

.cmf-title { font: 800 13px/1 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-dim); margin-bottom: 20px !important; }
.cmf-stores-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cmf-store {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head mapa" "estado estado" "horas horas";
  align-items: center; align-content: start; gap: 12px 16px; padding: 20px 22px; border-radius: 18px;
  background: var(--cm-ink-2); border: 1px solid var(--cm-line);
  transition: border-color .2s var(--cm-ease), transform .2s var(--cm-ease);
}
.cmf-store:hover { border-color: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.cmf-store-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmf-estado { grid-area: estado; }
.cmf-horas { grid-area: horas; }
.cmf-store-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: #fff; flex: none; }
.cmf-store-ico svg { width: 17px; height: 17px; }
.cmf-store h3 { font: 800 15px/1.25 Montserrat, sans-serif; color: #fff; }
.cmf-estado { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px/1 Montserrat, sans-serif; color: var(--cm-dim); min-height: 14px; }
.cmf-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cmf-estado:empty::before { display: none; }
.cmf-estado.is-open { color: var(--cm-ok); }
.cmf-estado.is-open::before { box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.cmf-horas { display: flex; flex-direction: column; gap: 7px; }
.cmf-horas li { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 Montserrat, sans-serif; color: var(--cm-text); }
.cmf-horas svg { width: 15px; height: 15px; color: var(--cm-dim); }
.cmf-mapa {
  grid-area: mapa; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06);
  font: 700 13.5px/1 Montserrat, sans-serif; color: #fff !important;
}
.cmf-mapa svg { width: 16px; height: 16px; transition: transform .2s var(--cm-ease); }
.cmf-mapa:hover { background: rgba(255, 255, 255, .12); }
.cmf-mapa:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- */
/* Barra final                                                       */
/* ---------------------------------------------------------------- */
.cmf-bottom { background: var(--cm-ink); border-top: 1px solid var(--cm-line); }
.cmf-bottom-in { display: flex; align-items: center; gap: 24px; min-height: 64px; padding-top: 16px; padding-bottom: 16px; font: 500 13px/1.4 Montserrat, sans-serif; color: var(--cm-dim); }
.cmf-bottom a { color: var(--cm-text) !important; display: inline-flex; align-items: center; gap: 6px; }
.cmf-bottom a:hover { color: #fff !important; }
.cmf-bottom svg { width: 15px; height: 15px; }
.cmf-bottom span a { font-weight: 700; }
.cmf-sp { flex: 1; }

/* ---------------------------------------------------------------- */
/* Tablet y celular                                                  */
/* ---------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cmf-grid { grid-template-columns: 1fr; gap: 44px; }
  .cmf-about { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo social" "lema lema" "contact contact"; align-items: center; gap: 20px; }
  .cmf-logo { grid-area: logo; }
  .cmf-social { grid-area: social; justify-self: end; }
  .cmf-lema { grid-area: lema; max-width: none; }
  .cmf-contact { grid-area: contact; justify-self: start; }
  .cmf-stores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .cmf-wrap { padding: 0 16px; }
  .cmf-brands { padding: 18px 0; }
  .cmf-brand { height: 48px; padding: 0 22px; }
  .cmf-brand img { zoom: .85; }
  .cmf-main { padding: 44px 0 36px; }
  .cmf-logo { height: 40px; }
  .cmf-lema { font-size: 15.5px; }
  .cmf-contact { width: 100%; }
  .cmf-stores-grid { grid-template-columns: 1fr; gap: 10px; }
  .cmf-store { padding: 16px 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "estado" "horas" "mapa"; }
  .cmf-mapa { justify-content: center; height: 44px; margin-top: 4px; }
  .cmf-bottom-in { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .cmf-sp { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmf-brands-track { animation: none; }
  .cmf-brands { overflow-x: auto; }
  .cmf * { transition: none !important; }
}