/* MEZZO / acabamento
   Camada final de luz e detalhe: feixes, piso iluminado, grades frias, vidro,
   molduras técnicas e luz que acompanha o cursor. Só apresentação: nada aqui
   muda conteúdo, preços ou funcionamento. Carregado por último. */

/* 00. Base: seleção, rolagem, texto ---------------------------------------- */
::selection {
  background: rgb(201 162 78 / 0.35);
}
h1,
h2,
h3 {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}
.reading-progress > span {
  background: linear-gradient(
    90deg,
    var(--gold),
    var(--gold-light) 55%,
    var(--fiber-light)
  );
  box-shadow: 0 0 14px rgb(234 211 155 / 0.55);
}
.grain {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  html {
    scrollbar-color: #26365a var(--navy);
    scrollbar-width: thin;
  }
  /* Granulação fina de filme, só em telas grandes. */
  .grain {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
  }
}

/* Itálicos em dourado degradê, com brilho brando nas seções escuras. */
.hero h1 em,
.club h2 em,
.footer-top > p em {
  background: linear-gradient(120deg, #f4e4b8, #dcbd74 55%, #f1dcab);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgb(234 211 155 / 0.22));
}
.tech-panel h2 em {
  filter: drop-shadow(0 0 26px rgb(158 212 255 / 0.28));
}
.section-heading h2 em,
.faq h2 em,
.contact h2 em {
  background: linear-gradient(120deg, #c9a24e, #a37a2b 60%, #c4a057);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.eyebrow > span {
  background: linear-gradient(90deg, currentColor, transparent);
}
.temperature strong {
  text-shadow: 0 0 34px rgb(158 212 255 / 0.4);
}

/* 01. Botões e links ------------------------------------------------------- */
.button-gold {
  background: linear-gradient(135deg, #f3e2b4, #e4ca8f 55%, #d9bc7b);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 18px 38px -16px rgb(201 162 78 / 0.55);
}
.button-gold:hover {
  background: linear-gradient(135deg, #f8e9c3, #ebd39d 55%, #e1c689);
  transform: translateY(-1px);
}
.button-outline {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  transition:
    color 0.3s,
    background 0.3s,
    box-shadow 0.4s,
    transform 0.4s var(--ease);
}
.button-outline:hover {
  box-shadow:
    0 0 0 1px rgb(234 211 155 / 0.35),
    0 16px 36px -16px rgb(201 162 78 / 0.5);
}
.button-dark {
  border-color: rgb(201 162 78 / 0.45);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 22px 42px -22px rgb(6 12 26 / 0.75);
}
.button-dark:hover {
  border-color: var(--gold-light);
  transform: translateY(-1px);
}
.navigation > a:not(.nav-cta) {
  position: relative;
}
.navigation > a:not(.nav-cta):after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-light), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.navigation > a:not(.nav-cta):hover:after {
  transform: scaleX(1);
}
.text-link > span,
.hero-secondary > span:last-child,
.nav-cta > span,
.button > span {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.text-link:hover > span,
.hero-secondary:hover > span:last-child,
.nav-cta:hover > span,
.button:hover > span {
  transform: translate(3px, -3px);
}

/* 02. Cabeçalho de vidro --------------------------------------------------- */
.header.is-scrolled {
  background: rgb(6 12 26 / 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: none;
}
.header.is-scrolled:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(201 162 78 / 0.5) 18%,
    rgb(158 212 255 / 0.35) 62%,
    transparent
  );
}

/* 03. Abertura: feixes, piso iluminado e moldura técnica ------------------- */
.hero-atmosphere:before {
  content: "";
  position: absolute;
  inset: -25% -15% -10% 25%;
  background: conic-gradient(
    from 196deg at 80% 6%,
    transparent 0deg,
    transparent 39deg,
    rgb(158 212 255 / 0.05) 41deg,
    transparent 44deg,
    transparent 49deg,
    rgb(158 212 255 / 0.03) 51.5deg,
    transparent 55deg,
    transparent 61deg,
    rgb(234 211 155 / 0.025) 62.5deg,
    transparent 65deg
  );
  filter: blur(5px);
  opacity: var(--hero-glow, 0.8);
}
.hero-atmosphere:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 6% 100%,
      rgb(201 162 78 / 0.11),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 50% 45%,
      transparent 52%,
      rgb(2 5 12 / 0.55)
    );
}
.light-horizon {
  box-shadow: 0 0 22px 1px rgb(158 212 255 / 0.25);
}
.hero-product:before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 24%;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 35%,
    rgb(62 155 230 / 0.34),
    rgb(62 155 230 / 0.08) 45%,
    transparent 70%
  );
  filter: blur(16px);
  opacity: var(--hero-glow, 0.8);
  pointer-events: none;
}
.hero-product:after {
  content: "";
  position: absolute;
  inset: 8% 5% 12%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.5;
  --tick: linear-gradient(var(--gold-light), var(--gold-light));
  background:
    var(--tick) left top / 20px 1px,
    var(--tick) left top / 1px 20px,
    var(--tick) right top / 20px 1px,
    var(--tick) right top / 1px 20px,
    var(--tick) left bottom / 20px 1px,
    var(--tick) left bottom / 1px 20px,
    var(--tick) right bottom / 20px 1px,
    var(--tick) right bottom / 1px 20px;
  background-repeat: no-repeat;
}
.product-caption {
  text-shadow: 0 0 20px rgb(6 12 26 / 0.9);
}
.hero-bottom {
  border-top-color: transparent;
  background: linear-gradient(
      90deg,
      rgb(201 162 78 / 0.45),
      rgb(158 212 255 / 0.22) 45%,
      transparent
    )
    top / 100% 1px no-repeat;
}
.scroll-track {
  box-shadow: 0 0 12px rgb(158 212 255 / 0.25);
}

/* 04. Tecnologia: grade fria, cristais e anel orbital ---------------------- */
.technology-story {
  box-shadow: inset 0 1px 0 rgb(158 212 255 / 0.1);
}
.tech-atmosphere:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(158 212 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(158 212 255 / 0.06) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(
    ellipse at 32% 52%,
    #000 15%,
    transparent 68%
  );
  mask-image: radial-gradient(ellipse at 32% 52%, #000 15%, transparent 68%);
  opacity: var(--cold-intensity, 0.6);
}
.tech-atmosphere:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 28%, rgb(214 240 255 / 0.5) 0 1.2px, transparent 3px),
    radial-gradient(circle at 27% 70%, rgb(214 240 255 / 0.35) 0 1px, transparent 2.6px),
    radial-gradient(circle at 41% 22%, rgb(214 240 255 / 0.4) 0 1.5px, transparent 3.4px),
    radial-gradient(circle at 9% 58%, rgb(214 240 255 / 0.3) 0 1px, transparent 2.4px),
    radial-gradient(circle at 36% 84%, rgb(214 240 255 / 0.45) 0 1.2px, transparent 3px),
    radial-gradient(circle at 48% 48%, rgb(214 240 255 / 0.3) 0 0.9px, transparent 2.2px),
    radial-gradient(circle at 21% 45%, rgb(214 240 255 / 0.55) 0 1.6px, transparent 3.6px),
    radial-gradient(circle at 60% 14%, rgb(214 240 255 / 0.3) 0 1px, transparent 2.4px);
  opacity: calc(var(--cold-intensity, 0.6) * 0.9);
}
.tech-orbit {
  border-color: rgb(108 174 230 / 0.16);
  box-shadow:
    0 0 70px rgb(62 155 230 / 0.08),
    inset 0 0 70px rgb(62 155 230 / 0.06);
}
.tech-orbit:after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 68%,
    rgb(158 212 255 / 0.6) 86%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1px)
  );
  animation: orbita 16s linear infinite;
}
@keyframes orbita {
  to {
    transform: rotate(1turn);
  }
}
.tech-panel .chapter {
  position: relative;
  padding-left: 34px;
}
.tech-panel .chapter:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.tech-chapters a {
  transition:
    color 0.3s,
    border-color 0.3s;
}
.tech-chapters a.active {
  box-shadow: 0 1px 0 rgb(158 212 255 / 0.35);
}
.tip-tag {
  text-shadow: 0 0 18px rgb(6 12 26 / 0.9);
}

/* 05. Tratamentos: luz quente, molduras duplas e cursor ------------------ */
.treatments {
  isolation: isolate;
}
.treatments:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 88% 8%,
      rgb(201 162 78 / 0.14),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 8% 92%,
      rgb(62 155 230 / 0.07),
      transparent 42%
    );
}
.treatments:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    620px circle at var(--mx, 85%) var(--my, 15%),
    rgb(201 162 78 / 0.1),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.6s;
}
.treatment-picture {
  outline: 1px solid rgb(201 162 78 / 0.4);
  outline-offset: 10px;
  box-shadow: 0 36px 70px -34px rgb(6 12 26 / 0.55);
}
.treatment-number {
  text-shadow: 0 0 18px rgb(6 12 26 / 0.8);
}
.treatment-cta {
  background: linear-gradient(
      90deg,
      rgb(201 162 78 / 0.5),
      rgb(201 162 78 / 0.12) 60%,
      transparent
    )
    bottom / 100% 1px no-repeat;
  border-bottom-color: transparent;
}
.treatment-seal {
  background:
    linear-gradient(120deg, rgb(62 155 230 / 0.09), rgb(62 155 230 / 0.03)),
    rgb(255 255 255 / 0.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}

/* 06. Clube: grade, vidro e luz do cursor ---------------------------------- */
.club:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 4% 100%,
      rgb(201 162 78 / 0.12),
      transparent 45%
    ),
    linear-gradient(rgb(158 212 255 / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgb(158 212 255 / 0.03) 1px, transparent 1px);
  background-size:
    auto,
    96px 96px,
    96px 96px;
  -webkit-mask-image: radial-gradient(
    ellipse at 78% 22%,
    #000 5%,
    transparent 58%
  );
  mask-image: radial-gradient(ellipse at 78% 22%, #000 5%, transparent 58%);
}
.club:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    560px circle at var(--mx, 75%) var(--my, 30%),
    rgb(62 155 230 / 0.13),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.6s;
}
.club-tabs button {
  transition:
    color 0.3s,
    background 0.4s,
    border-color 0.3s;
}
.club-tabs button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  background: linear-gradient(var(--gold-light), rgb(234 211 155 / 0.15));
  opacity: 0;
  transition: opacity 0.35s;
}
.club-tabs button[aria-selected="true"]:before {
  opacity: 1;
}
.club-tabs button[aria-selected="true"] {
  background: linear-gradient(
    100deg,
    rgb(201 162 78 / 0.1),
    rgb(62 155 230 / 0.06) 55%,
    transparent
  );
}
.plan-panel:after {
  content: "";
  position: absolute;
  inset: 0 -28px -28px;
  z-index: -1;
  border: 1px solid rgb(158 212 255 / 0.1);
  border-top: 0;
  background: linear-gradient(
    165deg,
    rgb(255 255 255 / 0.045),
    rgb(255 255 255 / 0.008) 55%,
    rgb(62 155 230 / 0.03)
  );
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 0.03),
    0 50px 90px -50px rgb(0 0 0 / 0.7);
  pointer-events: none;
}
.plan-price strong,
.plan-option-price {
  transition: color 0.3s;
}
.plan-price strong {
  background: linear-gradient(180deg, #f8ebc6, #e2c37f 70%, #d3b268);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.plan-inclusions li {
  transition: color 0.3s;
}
.plan-inclusions li:hover {
  color: var(--paper);
}

/* 07. Dúvidas e contato: luz quente e vidro leve --------------------------- */
.faq {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.faq:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 100% 0%,
    rgb(201 162 78 / 0.11),
    transparent 45%
  );
}
.faq-list details {
  border-bottom: 0;
  background: linear-gradient(
      90deg,
      rgb(201 162 78 / 0.5),
      rgb(201 162 78 / 0.12) 60%,
      transparent
    )
    bottom / 100% 1px no-repeat;
  transition: background-color 0.4s;
}
.faq-list details[open] {
  background-color: rgb(201 162 78 / 0.045);
}
.faq-list summary {
  padding-inline: 4px;
  transition: color 0.3s;
}
.faq-list summary:hover {
  color: #8a6a26;
}
.faq-list summary > span {
  display: inline-block;
  transition:
    transform 0.45s var(--ease),
    color 0.3s;
}
.faq-list details[open] summary > span {
  transform: rotate(45deg);
  color: var(--gold);
}
.faq-list details > div {
  padding-inline: 4px;
}
.contact-inner {
  position: relative;
}
.contact-inner:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14%;
  width: 78%;
  height: 62%;
  z-index: -1;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgb(255 255 255 / 0.55),
    rgb(201 162 78 / 0.12) 48%,
    transparent 72%
  );
  filter: blur(22px);
  pointer-events: none;
}
.city-field select {
  background-color: rgb(255 255 255 / 0.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.city-field select:hover {
  border-color: #8a7a55;
}
.choice {
  background: rgb(255 255 255 / 0.3);
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.choice.active {
  box-shadow: 0 10px 24px -14px rgb(6 12 26 / 0.45);
}
.contact .button-dark {
  box-shadow: 0 26px 46px -22px rgb(6 12 26 / 0.7);
}

/* 08. Rodapé e WhatsApp flutuante ----------------------------------------- */
.footer {
  position: relative;
  overflow: clip;
}
.footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(201 162 78 / 0.55) 30%,
    rgb(158 212 255 / 0.3) 70%,
    transparent
  );
}
.footer:after {
  content: "";
  position: absolute;
  left: 50%;
  top: -160px;
  width: 60%;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgb(62 155 230 / 0.1),
    transparent 60%
  );
  pointer-events: none;
}
.whatsapp-float {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 14px 34px rgb(6 12 26 / 0.35);
}
.whatsapp-float.is-visible:hover {
  transform: translateY(-2px);
}

/* 09. Cursor, telas pequenas e movimento reduzido -------------------------- */
@media (hover: hover) and (pointer: fine) {
  .club.has-cursor-light:after,
  .treatments.has-cursor-light:after {
    opacity: 1;
  }
}
@media (max-width: 800px) {
  .plan-panel:after {
    inset: 0 -16px -20px;
  }
  .treatment-picture {
    outline-offset: 7px;
  }
  .tech-orbit:after {
    animation: none;
  }
  .hero-product:after {
    inset: 6% 3% 10%;
  }
}
@media (max-width: 520px) {
  .hero-bottom > span:first-child {
    max-width: none;
    white-space: nowrap;
    letter-spacing: 0.06em;
  }
  .hero-bottom a {
    max-width: none;
    gap: 8px;
  }
}
@media (max-width: 360px) {
  .hero-bottom > span:first-child {
    white-space: normal;
    max-width: 125px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tech-orbit:after {
    animation: none;
  }
  .button-gold:hover,
  .button-dark:hover,
  .whatsapp-float.is-visible:hover {
    transform: none;
  }
  .text-link > span,
  .button > span,
  .nav-cta > span,
  .hero-secondary > span:last-child,
  .faq-list summary > span,
  .navigation > a:not(.nav-cta):after {
    transition: none;
  }
}