/* Ajustes complementares de responsividade mobile para Marcolina Santos Beauty Hair */

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Botão flutuante do WhatsApp */
a[href*="wa.me"].fixed,
a[href*="wa.me/message"].fixed {
  z-index: 9999 !important;
  touch-action: manipulation;
}

a[href*="wa.me"].fixed svg,
a[href*="wa.me/message"].fixed svg {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  color: #ffffff !important;
  fill: currentColor !important;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 86px;
  }

  body {
    font-size: 16px;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section,
  footer,
  header {
    max-width: 100vw;
  }

  h1 {
    font-size: clamp(2.35rem, 12vw, 4.25rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(2rem, 9vw, 3.25rem) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
  }

  h3 {
    font-size: clamp(1.45rem, 7vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }

  p {
    font-size: clamp(0.95rem, 4vw, 1.05rem);
    line-height: 1.65;
  }

  a,
  button {
    min-height: 44px;
  }

  a[class*="btn-luxury"],
  button[class*="btn-luxury"],
  .btn-luxury-primary,
  .btn-luxury-secondary,
  .btn-luxury-secondary-light {
    width: 100%;
    max-width: 340px;
    justify-content: center;
    text-align: center;
    padding-left: 20px !important;
    padding-right: 20px !important;
    white-space: normal;
  }

  [class*="grid"] {
    min-width: 0;
  }

  [class*="gap-8"],
  [class*="gap-10"],
  [class*="gap-12"],
  [class*="gap-16"] {
    row-gap: 2rem;
  }

  /* Evita que imagens decorativas e blocos com deslocamento criem rolagem lateral em celulares. */
  [style*="translate"],
  [class*="translate-x"],
  [class*="-right"],
  [class*="-left"] {
    max-width: 100vw;
  }

  /* Mantém o WhatsApp flutuante confortável no polegar e longe das bordas seguras do aparelho. */
  a[href*="wa.me"].fixed,
  a[href*="wa.me/message"].fixed {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  a[href*="wa.me"].fixed > div[class*="w-16"],
  a[href*="wa.me/message"].fixed > div[class*="w-16"] {
    width: 58px !important;
    height: 58px !important;
  }

  a[href*="wa.me"].fixed svg,
  a[href*="wa.me/message"].fixed svg {
    width: 31px !important;
    height: 31px !important;
  }

  a[href*="wa.me"].fixed [class*="bottom-20"],
  a[href*="wa.me/message"].fixed [class*="bottom-20"] {
    display: none !important;
  }

  footer {
    padding-bottom: 88px !important;
  }
}

@media (max-width: 390px) {
  h1 {
    font-size: clamp(2.1rem, 11vw, 3.2rem) !important;
  }

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  a[href*="wa.me"].fixed > div[class*="w-16"],
  a[href*="wa.me/message"].fixed > div[class*="w-16"] {
    width: 54px !important;
    height: 54px !important;
  }
}

/* Em celulares, remove o preloader para acelerar a primeira visualização e evitar texto cortado. */
@media (max-width: 767px) {
  .preloader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .preloader-text,
  .preloader-subtitle {
    max-width: calc(100vw - 32px) !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Reforço final: mantém o botão do WhatsApp fixo na janela, inclusive quando componentes animados criam contextos de transformação. */
a.whatsapp-floating-button,
a[href*="wa.me"].whatsapp-floating-button,
a[href*="wa.me/message"].whatsapp-floating-button {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 64px !important;
  height: 64px !important;
  z-index: 2147483000 !important;
  isolation: isolate;
}

@media (max-width: 767px) {
  a.whatsapp-floating-button,
  a[href*="wa.me"].whatsapp-floating-button,
  a[href*="wa.me/message"].whatsapp-floating-button {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: 58px !important;
    height: 58px !important;
  }
}

.whatsapp-static-floating {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.whatsapp-static-circle {
  width: 64px !important;
  height: 64px !important;
  border-radius: 9999px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 14px 35px rgba(37, 211, 102, 0.38), 0 0 0 1px rgba(255,255,255,0.22) inset !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.whatsapp-static-floating:hover .whatsapp-static-circle,
.whatsapp-static-floating:focus-visible .whatsapp-static-circle {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 18px 44px rgba(37, 211, 102, 0.46), 0 0 0 1px rgba(255,255,255,0.28) inset !important;
}

.whatsapp-static-icon {
  width: 34px !important;
  height: 34px !important;
  max-width: none !important;
  display: block !important;
  color: #ffffff !important;
}

@media (max-width: 767px) {
  .whatsapp-static-circle {
    width: 58px !important;
    height: 58px !important;
  }

  .whatsapp-static-icon {
    width: 31px !important;
    height: 31px !important;
  }
}

/* Evita sobreposição entre o botão original do app e o botão estático reforçado. */
a.fixed.whatsapp-floating-button:not(.whatsapp-static-floating) {
  display: none !important;
}