/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 150px 0 110px; background: radial-gradient(90% 80% at 85% 10%, #4b1c55 0%, var(--ameixa) 62%); isolation: isolate; }
.aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aura i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.aura i:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -12vmax; background: radial-gradient(circle, rgba(122, 36, 72, .9), transparent 65%); animation: flutua 22s ease-in-out infinite alternate; }
.aura i:nth-child(2) { width: 34vmax; height: 34vmax; right: -8vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(199, 163, 242, .35), transparent 65%); animation: flutua 26s ease-in-out infinite alternate-reverse; }
.aura i:nth-child(3) { width: 22vmax; height: 22vmax; left: 40%; top: 30%; background: radial-gradient(circle, rgba(255, 134, 207, .22), transparent 65%); animation: flutua 18s ease-in-out infinite alternate; }
@keyframes flutua { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); } }

.hero-grelha { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.hero-local { color: var(--lilas); font-size: var(--t-s); letter-spacing: .04em; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.hero-local::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero-titulo { font-size: var(--t-hero); font-weight: 400; line-height: .98; letter-spacing: -.02em; margin-bottom: 30px; }
.hero-titulo .linha { display: block; padding-bottom: .16em; margin-bottom: -.1em; clip-path: inset(-.3em -3em 0 -.3em); }
.hero-titulo .linha > span {
  display: inline-block;
  background: linear-gradient(180deg, #ffe3f3 0%, #ffb0de 45%, #e56fb8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 134, 207, .18));
}
.js .hero-titulo .linha > span { transform: translateY(105%); animation: sobe 1.3s var(--ease) forwards; }
.js .hero-titulo .linha:nth-child(2) > span { animation-delay: .12s; }
@keyframes sobe { to { transform: none; } }
.hero-sub { max-width: 34ch; color: var(--luz-2); font-size: var(--t-l); line-height: 1.55; margin-bottom: 38px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.js .hero-local, .js .hero-sub, .js .hero-acoes { opacity: 0; transform: translateY(18px); animation: aparece 1.1s var(--ease) forwards; }
.js .hero-local { animation-delay: .05s; }
.js .hero-sub { animation-delay: .4s; }
.js .hero-acoes { animation-delay: .55s; }
@keyframes aparece { to { opacity: 1; transform: none; } }

.hero-arco { position: relative; margin: 0; justify-self: end; width: min(100%, 440px); aspect-ratio: 4 / 5; }
.arco-logo { position: absolute; inset: 0; display: grid; place-items: center; padding: 22% 14% 6%; border-radius: 999px 999px 22px 22px; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 38%, rgba(255, 134, 207, .2), transparent 70%), linear-gradient(180deg, rgba(122, 36, 72, .55) 0%, rgba(58, 23, 67, .7) 55%, rgba(32, 11, 37, .85) 100%);
  box-shadow: 0 0 0 1px rgba(255, 190, 230, .16) inset, 0 40px 80px -40px rgba(0, 0, 0, .7); }
.arco-logo img { width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(255, 150, 210, .28)); }
.js .arco-logo { clip-path: inset(100% 0 0 0 round 999px 999px 22px 22px); animation: revela-foto 1.5s var(--ease) .25s forwards; }
.js .arco-logo img { opacity: 0; transform: translateY(16px) scale(.96); animation: aparece-logo 1.4s var(--ease) 1s forwards; }
@keyframes aparece-logo { to { opacity: 1; transform: none; } }
@keyframes revela-foto { to { clip-path: inset(0 0 0 0 round 999px 999px 22px 22px); } }
.neon-arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translate(18px, -18px); z-index: 2; pointer-events: none; }
.neon-arco path { fill: none; stroke: #ffc2e6; stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #ff86cf) drop-shadow(0 0 10px rgba(255, 110, 200, .75)) drop-shadow(0 0 26px rgba(255, 110, 200, .4)); }
.js .neon-arco { opacity: 0; animation: liga 1.8s steps(1) 1.4s forwards, respira 5s ease-in-out 3.4s infinite; }
@keyframes liga { 0% { opacity: 0; } 8% { opacity: 1; } 14% { opacity: .15; } 22% { opacity: 1; } 30% { opacity: .35; } 36%, 100% { opacity: 1; } }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }

@media (max-width: 860px) {
  .hero { padding: 116px 0 72px; }
  .hero-grelha { grid-template-columns: 1fr; }
  .hero-arco { justify-self: center; width: min(78%, 360px); margin-top: 12px; }
  .neon-arco { transform: translate(12px, -12px); }
  .aura i { filter: blur(50px); }
}

/* ---------- Faixa ---------- */
.faixa { background: var(--vinho); overflow: hidden; border-block: 1px solid rgba(255, 180, 220, .2); }
.faixa-trilho { display: flex; width: max-content; animation: corre 48s linear infinite; }
.faixa span { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); padding: 18px 0; white-space: nowrap; color: #ffe6f3; display: inline-flex; align-items: center; }
.faixa span::after { content: ""; width: 7px; height: 7px; margin-inline: clamp(22px, 3vw, 40px); border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- Secções claras ---------- */
section { position: relative; }
.sobre, .tratamentos, .resultados, .metodo, .headspa { padding: clamp(80px, 11vw, 150px) 0; }
.sec-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 60px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-cabeca h2 { font-size: var(--t-2xl); }
.sec-cabeca p { max-width: 42ch; color: var(--luz-2); justify-self: end; }
.claro .sec-cabeca p { color: var(--tinta-2); }
@media (max-width: 760px) { .sec-cabeca { grid-template-columns: 1fr; } .sec-cabeca p { justify-self: start; } }

/* ---------- Sobre ---------- */
.sobre { background: var(--perola-2); }
.sobre-grelha { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.sobre-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; }
.sobre-foto::before { content: ""; position: absolute; inset: 0; border-radius: 24px; border: 1px solid rgba(122, 36, 72, .35); transform: translate(-16px, 16px); }
.sobre-foto img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 24px; box-shadow: 0 40px 70px -40px rgba(42, 16, 48, .55); transform: translate3d(0, var(--par, 0px), 0); }
.sobre-texto h2 { font-size: var(--t-2xl); margin-bottom: 22px; }
.destaque { font-family: var(--f-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.01em; color: var(--tinta); max-width: 22ch; margin-bottom: 28px; }
.sobre-corpo { display: grid; gap: 16px; color: var(--tinta-2); max-width: 58ch; }
.pilares { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--linha-clara); padding-top: 28px; }
.pilares strong { display: block; font-weight: 500; color: var(--tinta); margin-bottom: 6px; }
.pilares span { font-size: var(--t-s); color: var(--tinta-2); line-height: 1.5; display: block; }
@media (max-width: 860px) {
  .sobre-grelha { grid-template-columns: 1fr; }
  .sobre-foto { width: min(88%, 420px); margin-left: 16px; }
  .pilares { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Tratamentos ---------- */
.tratamentos { background: var(--ameixa); }
.lista-trat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-escura); counter-reset: none; }
.lista-trat li { border-bottom: 1px solid var(--linha-escura); }
.lista-trat a {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 18px 48px; align-items: center;
  padding: 28px 4px; text-decoration: none; position: relative; isolation: isolate;
  transition: padding .6s var(--ease);
}
.lista-trat a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 134, 207, .1), rgba(199, 163, 242, .05) 60%, transparent); opacity: 0; transition: opacity .5s var(--ease); }
.lista-trat a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--neon); box-shadow: 0 0 10px var(--neon), 0 0 2px var(--neon); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.lista-trat .nome { font-family: var(--f-display); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.05; transition: color .4s; }
.lista-trat .resumo { color: var(--luz-2); font-size: var(--t-s); line-height: 1.55; max-width: 52ch; }
.lista-trat .preco { display: flex; align-items: center; gap: 16px; white-space: nowrap; font-size: var(--t-s); color: var(--lilas); font-variant-numeric: tabular-nums; }
.lista-trat .seta { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha-escura); display: grid; place-items: center; transition: transform .6s var(--ease), background-color .4s, border-color .4s, box-shadow .4s; }
.lista-trat .seta svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .lista-trat a:hover { padding-inline: 20px; }
  .lista-trat a:hover::before { opacity: 1; }
  .lista-trat a:hover::after { transform: scaleX(1); }
  .lista-trat a:hover .nome { color: #ffd0ea; }
  .lista-trat a:hover .seta { background: var(--neon); border-color: var(--neon); color: #2a0c2a; transform: rotate(-45deg); box-shadow: 0 0 18px rgba(255, 134, 207, .6); }
}
@media (max-width: 860px) {
  .lista-trat a { grid-template-columns: 1fr auto; padding: 24px 0; gap: 8px 16px; }
  .lista-trat .nome { grid-column: 1; }
  .lista-trat .resumo { grid-column: 1 / -1; grid-row: 2; }
  .lista-trat .preco { grid-column: 2; grid-row: 1; }
}

/* ---------- Head Spa ---------- */
.headspa { overflow: hidden; isolation: isolate; background: radial-gradient(70% 90% at 0% 100%, rgba(255, 134, 207, .18), transparent 60%), linear-gradient(160deg, #5a1b46 0%, #3a1743 55%, #2a1030 100%); }
.headspa-grelha { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.novidade { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-s); color: #ffd0ea; margin-bottom: 20px; }
.novidade::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 4px rgba(255, 134, 207, .18), 0 0 14px var(--neon); animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 7px rgba(255, 134, 207, .06), 0 0 20px var(--neon); } }
.headspa h2 { font-size: var(--t-2xl); margin-bottom: 22px; }
.headspa-texto > p:not(.novidade) { color: var(--luz-2); max-width: 46ch; margin-bottom: 16px; }
.headspa .pequeno { font-size: var(--t-xs); }
.menu-spa { list-style: none; margin: 0; padding: 10px; display: grid; gap: 4px; border-radius: 26px; background: rgba(32, 11, 37, .55); border: 1px solid rgba(255, 170, 220, .18); box-shadow: 0 0 0 1px rgba(255, 134, 207, .05), 0 30px 70px -30px rgba(0, 0, 0, .6), 0 0 50px -20px rgba(255, 134, 207, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.menu-spa a { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 20px 22px; border-radius: 18px; text-decoration: none; transition: background-color .4s var(--ease), transform .5s var(--ease); }
.menu-spa a:hover { background: rgba(255, 134, 207, .08); transform: translateX(4px); }
.menu-spa .n { font-size: var(--t-m); color: var(--luz); font-weight: 400; }
.menu-spa .v small { font-family: var(--f-texto); font-size: .8rem; margin-left: 4px; color: var(--luz-2); text-shadow: none; }
.menu-spa .v { font-family: var(--f-display); font-size: 1.7rem; line-height: 1; color: #ffc2e6; text-shadow: 0 0 14px rgba(255, 134, 207, .45); font-variant-numeric: tabular-nums; grid-row: span 2; align-self: center; }
.menu-spa .m { font-size: var(--t-xs); color: var(--luz-2); }
@media (max-width: 860px) { .headspa-grelha { grid-template-columns: 1fr; } }

/* ---------- Resultados ---------- */
.comparas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.compara { margin: 0; }
.compara-area { position: relative; aspect-ratio: 960 / 597; border-radius: var(--raio); overflow: hidden; background: var(--perola-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.compara-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compara-area .antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compara-area input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 4; -webkit-appearance: none; appearance: none; }
.compara-area input:focus-visible ~ .pega .botao { outline: 2px solid #fff; outline-offset: 3px; }
.pega { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(255, 134, 207, .9), 0 0 2px #fff; z-index: 3; pointer-events: none; }
.pega .botao { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; pointer-events: none; touch-action: none; cursor: ew-resize; transition: transform .3s var(--ease); border-radius: 50%; background: rgba(42, 16, 48, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat; border: 1.5px solid #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 14px rgba(255, 134, 207, .6); }
.rot { position: absolute; top: 12px; z-index: 2; font-size: var(--t-xs); padding: 4px 10px; border-radius: 999px; background: rgba(42, 16, 48, .55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.rot-a { left: 12px; } .rot-d { right: 12px; }
.compara figcaption { margin-top: 14px; font-size: var(--t-s); color: var(--tinta-2); }
.aviso { margin-top: 34px; font-size: var(--t-xs); color: var(--tinta-2); max-width: 60ch; }
@media (max-width: 860px) {
  .comparas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .comparas::-webkit-scrollbar { display: none; }
  .compara { scroll-snap-align: start; }
  /* No carrossel: deslizar muda de foto; arrastar o círculo compara */
  .compara-area { touch-action: pan-x pan-y; }
  .compara-area input { pointer-events: none; }
  .pega .botao { pointer-events: auto; width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .pega .botao.ativo { transform: scale(1.12); }
}
.comparas-nav { display: none; align-items: center; gap: 16px; margin-top: 22px; }
.nav-seta { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--linha-clara); background: #fff; color: var(--tinta); display: grid; place-items: center; cursor: pointer; transition: background-color .35s var(--ease), color .35s, border-color .35s, opacity .35s, transform .35s var(--ease); }
.nav-seta svg { width: 18px; height: 18px; }
.nav-seta:hover:not(:disabled) { background: var(--ameixa); color: #ffe3f3; border-color: var(--ameixa); }
.nav-seta:active:not(:disabled) { transform: scale(.94); }
.nav-seta:disabled { opacity: .35; cursor: default; }
.pontos { display: flex; gap: 8px; }
.pontos button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.pontos button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(43, 22, 48, .2); transition: width .45s var(--ease), background-color .35s; }
.pontos button[aria-current="true"]::before { width: 24px; background: var(--vinho); }
@media (max-width: 860px) { .comparas-nav { display: flex; } }

/* ---------- Método ---------- */
.metodo { background: var(--perola-2); padding-top: clamp(70px, 9vw, 120px); }
.metodo-grelha { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 100px); }
.metodo-cabeca h2 { font-size: var(--t-2xl); margin-bottom: 20px; }
.metodo-cabeca p { color: var(--tinta-2); max-width: 38ch; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.passos::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: linear-gradient(var(--vinho), rgba(122, 36, 72, .15)); }
.passos li { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 0 0 38px; }
.passos li:last-child { padding-bottom: 0; }
.passos .num { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--perola); border: 1px solid rgba(122, 36, 72, .35); font-family: var(--f-display); font-size: 1.6rem; color: var(--vinho); }
.passos h3 { font-family: var(--f-display); font-size: var(--t-xl); margin: 10px 0 10px; color: var(--tinta); }
.passos p { color: var(--tinta-2); max-width: 46ch; }
@media (max-width: 860px) { .metodo-grelha { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.cta { overflow: hidden; isolation: isolate; padding: clamp(90px, 12vw, 160px) 0; background: radial-gradient(60% 80% at 50% 110%, rgba(255, 134, 207, .22), transparent 65%), var(--ameixa); }
.aura-cta i:nth-child(1) { width: 40vmax; height: 40vmax; left: -10vmax; top: -20vmax; background: radial-gradient(circle, rgba(122, 36, 72, .8), transparent 65%); animation: flutua 24s ease-in-out infinite alternate; }
.aura-cta i:nth-child(2) { width: 30vmax; height: 30vmax; right: -10vmax; bottom: -14vmax; background: radial-gradient(circle, rgba(199, 163, 242, .3), transparent 65%); animation: flutua 20s ease-in-out infinite alternate-reverse; }
.cta-dentro { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 22px; }
.cta-lotus { width: 74px; filter: drop-shadow(0 0 8px rgba(255, 134, 207, .8)) drop-shadow(0 0 24px rgba(255, 110, 200, .4)); }
.cta h2 { font-size: var(--t-2xl); color: #ffe3f3; text-shadow: 0 0 30px rgba(255, 134, 207, .35); }
.cta p { color: var(--luz-2); max-width: 44ch; margin-bottom: 10px; }