/* Sommo Beauty House — refinamentos globais */

/* A hero deve permanecer limpa: os patterns continuam nas demais áreas escuras. */
body.home .hero-copy-panel > .pattern-wash {
  display: none !important;
}

/* WhatsApp flutuante: conversão visível sem usar o verde padrão do aplicativo. */
.sommo-floating-whatsapp {
  align-items: center;
  background: rgba(5, 5, 5, .94);
  border: 1px solid rgba(210, 163, 74, .72);
  border-radius: 999px;
  bottom: 24px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  color: #d2a34a !important;
  display: inline-flex;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  gap: 10px;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  min-height: 52px;
  opacity: 1;
  padding: 0 19px;
  position: fixed;
  right: 24px;
  text-decoration: none !important;
  text-transform: uppercase;
  transform: translateY(0);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease, transform .25s ease;
  visibility: visible;
  z-index: 99990;
}

.sommo-floating-whatsapp svg {
  color: inherit !important;
  flex: 0 0 22px;
  fill: currentColor !important;
  height: 22px;
  opacity: 1 !important;
  visibility: visible !important;
  width: 22px;
}

.sommo-floating-whatsapp svg path {
  fill: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sommo-floating-whatsapp > span {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: currentColor !important;
}

.sommo-floating-whatsapp:hover,
.sommo-floating-whatsapp:focus-visible {
  background: #d2a34a !important;
  background-color: #d2a34a !important;
  border-color: #d2a34a !important;
  color: #050505 !important;
  outline: 0;
  transform: translateY(-2px);
}

.sommo-floating-whatsapp:hover > span,
.sommo-floating-whatsapp:focus-visible > span {
  color: #050505 !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #050505 !important;
}

.sommo-floating-whatsapp:hover svg,
.sommo-floating-whatsapp:focus-visible svg,
.sommo-floating-whatsapp:hover svg path,
.sommo-floating-whatsapp:focus-visible svg path {
  color: #050505 !important;
  fill: #050505 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sommo-floating-whatsapp.is-footer-visible {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  visibility: hidden;
}

/* Instagram: o fundo dourado do hover precisa manter texto e seta legíveis. */
body.sommo-wp-page .footer .footer-instagram:hover,
body.sommo-wp-page .footer .footer-instagram:focus-visible,
body.sommo-404-page .footer .footer-instagram:hover,
body.sommo-404-page .footer .footer-instagram:focus-visible {
  color: #050505 !important;
}

body.sommo-wp-page .footer .footer-instagram:hover .cta-arrow,
body.sommo-wp-page .footer .footer-instagram:focus-visible .cta-arrow,
body.sommo-404-page .footer .footer-instagram:hover .cta-arrow,
body.sommo-404-page .footer .footer-instagram:focus-visible .cta-arrow {
  border-color: #050505 !important;
  color: #050505 !important;
}

@media (max-width: 767px) {
  .sommo-floating-whatsapp {
    bottom: 16px;
    gap: 8px;
    min-height: 48px;
    padding: 0 15px;
    right: 16px;
    width: auto;
  }

  .sommo-floating-whatsapp svg {
    flex-basis: 21px;
    height: 21px;
    margin: 0;
    width: 21px;
  }

  .sommo-floating-whatsapp > span {
    clip: auto;
    clip-path: none;
    display: block !important;
    height: auto;
    overflow: visible;
    position: static;
    white-space: nowrap;
    width: auto;
  }

  /* O assistente administrativo da hospedagem usa 100vh fora do fluxo no
     desktop, mas pode reservar essa altura depois do footer no celular. */
  body.sommo-wp-page > #vue-app,
  body.sommo-404-page > #vue-app {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.sommo-wp-page > footer.elementor,
  body.sommo-404-page > footer.elementor,
  body.sommo-wp-page > footer.elementor .footer,
  body.sommo-404-page > footer.elementor .footer {
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  /* Hambúrguer sem moldura: só os dois traços do ícone. */
  .header .mobile-nav > summary,
  .header .mobile-nav > summary:hover,
  .header .mobile-nav > summary:focus,
  .header .mobile-nav > summary:focus-visible,
  .header .mobile-nav[open] > summary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .header .mobile-nav > summary:hover span,
  .header .mobile-nav > summary:focus-visible span,
  .header .mobile-nav[open] > summary span {
    background: var(--sommo-menu-gold, #d6a84c) !important;
  }

  /* Véu translúcido e desfoque real do conteúdo que fica atrás do painel. */
  .header .mobile-nav[open]::before {
    -webkit-backdrop-filter: blur(7px) saturate(.82);
    backdrop-filter: blur(7px) saturate(.82);
    background: rgba(5, 5, 5, .18);
    content: "";
    inset: 80px 0 0;
    pointer-events: none;
    position: fixed;
    z-index: 99997;
  }

  .header .mobile-nav > nav {
    -webkit-backdrop-filter: blur(16px) saturate(.78);
    backdrop-filter: blur(16px) saturate(.78);
    background-color: rgba(5, 5, 5, .82) !important;
  }
}

/* Template 404 */
body.sommo-404-page {
  background: #050505 !important;
}

.sommo-404 {
  align-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(210, 163, 74, .09), transparent 34%),
    #050505;
  color: #f2eadf;
  display: flex;
  isolation: isolate;
  justify-content: center;
  min-height: clamp(620px, 78svh, 900px);
  overflow: hidden;
  padding: clamp(110px, 12vw, 180px) 24px clamp(90px, 10vw, 150px);
  position: relative;
  text-align: center;
}

.sommo-404::before,
.sommo-404::after {
  border: 1px solid rgba(210, 163, 74, .13);
  content: "";
  height: clamp(250px, 36vw, 520px);
  position: absolute;
  transform: rotate(45deg);
  width: clamp(250px, 36vw, 520px);
  z-index: -1;
}

.sommo-404::before {
  left: clamp(-260px, -13vw, -80px);
  top: clamp(-250px, -12vw, -70px);
}

.sommo-404::after {
  bottom: clamp(-280px, -15vw, -100px);
  right: clamp(-270px, -14vw, -90px);
}

.sommo-404-orbit {
  border: 1px solid rgba(210, 163, 74, .08);
  border-radius: 50%;
  height: min(72vw, 860px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(72vw, 860px);
  z-index: -1;
}

.sommo-404-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 920px;
  position: relative;
  width: 100%;
}

.sommo-404-symbol {
  display: block;
  height: 50px;
  margin: 0 0 24px;
  object-fit: contain;
  width: 40px;
}

.sommo-404-label {
  color: #d2a34a !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .26em !important;
  line-height: 1.4 !important;
  margin: 0 0 12px !important;
  text-transform: uppercase;
}

.sommo-404-code {
  color: transparent;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(118px, 20vw, 270px);
  font-weight: 400;
  left: 50%;
  letter-spacing: -.08em;
  line-height: .72;
  opacity: .17;
  position: absolute;
  top: 42px;
  transform: translateX(-51%);
  -webkit-text-stroke: 1px #d2a34a;
  white-space: nowrap;
  z-index: -1;
}

.sommo-404 h1 {
  color: #f2eadf !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(46px, 6.2vw, 88px) !important;
  font-weight: 400 !important;
  letter-spacing: -.045em !important;
  line-height: .94 !important;
  margin: clamp(48px, 8vw, 98px) 0 0 !important;
  max-width: 900px;
}

.sommo-404 h1 em {
  color: #d2a34a !important;
  font-weight: 400;
}

.sommo-404-text {
  color: rgba(242, 234, 223, .72) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  margin: 28px auto 0 !important;
  max-width: 650px;
}

.sommo-404-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
}

.sommo-404-actions a {
  align-items: center;
  display: inline-flex;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  justify-content: center;
  letter-spacing: .17em !important;
  min-height: 56px;
  padding: 14px 22px;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.sommo-404-actions a span {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  height: 8px;
  margin-left: 15px;
  transform: rotate(45deg);
  width: 8px;
}

.sommo-404-primary {
  background: #d2a34a;
  border: 1px solid #d2a34a;
  color: #050505 !important;
}

.sommo-404-primary:hover,
.sommo-404-primary:focus-visible {
  background: transparent;
  color: #d2a34a !important;
  outline: 0;
}

.sommo-404-secondary {
  background: transparent;
  border: 1px solid rgba(242, 234, 223, .28);
  color: #f2eadf !important;
}

.sommo-404-secondary:hover,
.sommo-404-secondary:focus-visible {
  border-color: #d2a34a;
  color: #d2a34a !important;
  outline: 0;
}

@media (max-width: 767px) {
  .sommo-404 {
    min-height: 680px;
    padding: 110px 20px 92px;
  }

  .sommo-404-orbit {
    height: 125vw;
    width: 125vw;
  }

  .sommo-404-symbol {
    height: 42px;
    margin-bottom: 20px;
    width: 34px;
  }

  .sommo-404-code {
    font-size: clamp(118px, 42vw, 170px);
    top: 52px;
  }

  .sommo-404 h1 {
    font-size: clamp(43px, 12.7vw, 58px) !important;
    line-height: .96 !important;
    margin-top: 64px !important;
  }

  .sommo-404-text {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-top: 23px !important;
  }

  .sommo-404-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 30px;
    width: 100%;
  }

  .sommo-404-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sommo-floating-whatsapp,
  .sommo-404-actions a {
    transition: none;
  }
}