/* ═══════════════════════════════════════════════════════════════════
   3-ui.css — UI Global (Chrome)
   Loader, cursor, progress bar, WhatsApp, Back, Scroll buttons.
   Todos os elementos fixed do site estão aqui.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Loading overlay ─────────────────────────────────────────────── */
.js .loading::before,
.js .loading::after {
  content: '';
  position: fixed;
  z-index: var(--z-loader);
}

.js .loading::before {
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--clr-teal-body);
}

.js .loading::after {
  top: 50%; left: 50%;
  width: var(--loader-size);
  height: var(--loader-size);
  margin: calc(var(--loader-size) / -2) 0 0 calc(var(--loader-size) / -2);
  border-radius: var(--radius-full);
  opacity: 0.4;
  background: var(--loader-color);
  animation: chouchoute-loader-pulse 0.7s linear infinite alternate forwards;
}

@keyframes chouchoute-loader-pulse {
  from { transform: scale3d(1, 1, 1); }
  to   { transform: scale3d(2, 2, 1); }
}

.js body #loader { z-index: var(--z-loader); }

/* ── Cursor customizado (apenas desktop) ──────────────────────────── */
.cursor { display: none; }

@media screen and (min-width: 53em) {
  .cursor {
    position: fixed;
    top: 0; left: 0;
    display: block;
    pointer-events: none;
    width: 40px; height: 40px;
    z-index: var(--z-cursor);
  }

  .cursor__inner {
    fill: var(--clr-apricot);
    stroke: none;
    opacity: 0.7;
  }

  .no-js .cursor { display: none; }
}

/* ── Progress bar ─────────────────────────────────────────────────── */
.line { background-color: var(--clr-yellow); }

/* ── Scroll button (navegador de seção) ──────────────────────────── */
.scroll_button {
  position: fixed;
  left: 70%;
  bottom: var(--space-6);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  background: var(--clr-yellow);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px var(--clr-yellow-shadow);
  transition:
    transform  var(--duration-s) var(--ease-out),
    box-shadow var(--duration-s) var(--ease-out);
}

.scroll_button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px var(--clr-yellow-shadow-h);
}

.scroll_button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  text-decoration: none;
}

.scroll_button .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--clr-ink);
}

.scroll_button p { display: none; }

@media (max-width: 1599.98px) { .scroll_button { left: 68%; } }
@media (max-width: 1359.98px) { .scroll_button { left: 75%; } }
@media (max-width: 1023.98px) { .scroll_button { display: none; } }

/* ── WhatsApp floating button ────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--clr-whatsapp);
  color: var(--clr-white);
  text-decoration: none;
  padding: 0;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px var(--clr-whatsapp-shadow);
  transition:
    transform  var(--duration-s) var(--ease-out),
    box-shadow var(--duration-s) var(--ease-out);
  /* Fix for responsive - prevent overflow */
  overflow: visible !important;
  max-width: none !important;
}

.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px var(--clr-whatsapp-shadow-h);
  color: var(--clr-white);
}

.wa-float__label { display: none; }

.wa-float__btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-float__btn svg {
  width: 1.5rem; height: 1.5rem;
  fill: var(--clr-white);
}

@media (max-width: 767.98px) {
  .wa-float {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 3rem; height: 3rem;
    z-index: 9999 !important;
    position: fixed !important;
    overflow: visible !important;
  }
  .wa-float__btn svg { width: 1.25rem; height: 1.25rem; }
  /* Ensure button doesn't cause scroll */
  body .wa-float {
    transform: translateZ(0);
  }
}

/* ── Back button ─────────────────────────────────────────────────── */
.back-btn {
  position: fixed;
  bottom: var(--space-6);
  right: 6.5rem;
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--clr-yellow-soft);
  color: var(--clr-ink);
  text-decoration: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(255, 224, 130, 0.40);
  transition:
    transform  var(--duration-s) var(--ease-out),
    box-shadow var(--duration-s) var(--ease-out);
  /* Fix for responsive */
  overflow: visible !important;
}

.back-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 224, 130, 0.60);
}

.back-btn .material-symbols-outlined { font-size: 1.5rem; }

@media (max-width: 1023.98px) { 
  .back-btn { 
    display: none; 
  } 
}

/* ── Link de retorno sobreposto à imagem (páginas de preços) ──────── */
.service_inner_page.inner_page.inner_content .img_wraper a.to_back {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  z-index: var(--z-cards);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--clr-white);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  background: var(--clr-ink-glass);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--space-6);
  backdrop-filter: blur(8px);
}

.service_inner_page.inner_page.inner_content .img_wraper a.to_back:hover {
  background: var(--clr-ink-glass-h);
}

.service_inner_page.inner_page.inner_content
.img_wraper a.to_back .material-symbols-outlined {
  font-size: 1.1rem;
  transform: rotate(180deg);
}

.service_inner_page.inner_page.inner_content .mob_back { display: none; }

@media (max-width: 1023.98px) {
  .service_inner_page.inner_page.inner_content .img_wraper a.to_back {
    display: none;
  }
  .service_inner_page.inner_page.inner_content .mob_back {
    display: block;
    margin-bottom: var(--space-4);
  }
  .service_inner_page.inner_page.inner_content .mob_back a.to_back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--clr-yellow);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
  }
  .service_inner_page.inner_page.inner_content
  .mob_back a.to_back .material-symbols-outlined {
    font-size: 1.1rem;
    transform: rotate(180deg);
  }
}