/* ============================================================
   servico.css — the six service pages, from the Claude Design file
   "Leitura de Mapa Astral". Loaded after home.css, which already
   carries the tokens, header, buttons, steps and footer; this adds only
   what the service pages have that the home does not.
   ============================================================ */

/* ── header: the design's extra "Agendar" pill ──────────── */
.sv-book-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--nc-green); color: var(--nc-ivory); border-radius: 9999px;
  padding: 11px 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; white-space: nowrap;
}
.sv-book-pill:hover { opacity: .88; }

/* ── hero ────────────────────────────────────────────────── */
.sv-hero { position: relative; overflow: hidden; background: #0B1411; }
.sv-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-hero-veil { position: absolute; inset: 0; background: rgba(11, 20, 17, 0.55); }
.sv-hero-inner {
  position: relative; padding-top: 120px; padding-bottom: 128px;
  display: flex; flex-direction: column; gap: 28px; align-items: flex-start;
}
.sv-back {
  color: var(--nc-ivory); font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  display: inline-flex; align-items: center; gap: 10px;
}
.sv-back i { font-size: 10px; }
.sv-kind {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; color: var(--nc-sage);
  display: flex; align-items: center; gap: 12px;
}
.sv-kind i { font-size: 13px; }
.sv-hero h1 {
  font-family: var(--nc-serif); font-weight: 400; line-height: 1.05; color: var(--nc-ivory);
  font-size: clamp(2.75rem, 6vw, 5rem); max-width: 820px; text-wrap: balance;
}
.sv-hero h1 em { font-style: italic; }
.sv-hero-lede { font-size: 18px; line-height: 1.7; font-weight: 300; color: var(--nc-ivory); max-width: 560px; text-wrap: pretty; }
/* Duration and price: kept from the current pages, which is what a visitor
   looks for before writing on WhatsApp. */
.sv-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-fact {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(242, 240, 230, 0.3); border-radius: 9999px;
  padding: 9px 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--nc-ivory);
  background: rgba(242, 240, 230, 0.06);
}
.sv-fact i { font-size: 11px; color: var(--nc-sage); }
.sv-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.sv-hero-ctas .nc-btn-light i { font-size: 11px; }

/* ── the encounter ───────────────────────────────────────── */
.sv-about { background: var(--nc-white); padding: 96px 0; }
.sv-about-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px; align-items: start;
}
/* The text is longer than the design's one paragraph, so the photo stays
   beside it while it scrolls rather than leaving a blank column. */
.sv-arch {
  position: sticky; top: 112px;
  max-width: 480px; width: 100%; justify-self: center; aspect-ratio: 4 / 5;
  border-radius: 9999px 9999px 24px 24px; overflow: hidden; background: var(--nc-sage);
  box-shadow: 0 30px 60px -20px rgba(26, 60, 52, 0.35);
}
.sv-arch img { width: 100%; height: 100%; object-fit: cover; }
.sv-about-copy { display: flex; flex-direction: column; gap: 20px; }
.sv-lead {
  font-family: var(--nc-serif); font-weight: 400; color: var(--nc-green);
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.35; text-wrap: pretty;
}
.sv-about-copy p.sv-body { font-size: 16px; line-height: 1.75; font-weight: 300; text-wrap: pretty; }
.sv-close {
  padding-top: 24px; border-top: 1px solid rgba(26, 60, 52, 0.15);
  font-family: var(--nc-serif); font-style: italic; font-size: 19px; line-height: 1.7; color: var(--nc-green);
}

/* ── what is included ────────────────────────────────────── */
.sv-incl { background: var(--nc-white); padding: 0 0 96px; }
.sv-incl-head { margin-bottom: 32px; }
.sv-incl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.sv-incl-card {
  background: var(--nc-ivory); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 12px;
}
.sv-incl-n { font-family: var(--nc-serif); font-style: italic; font-size: 32px; line-height: 1; color: var(--nc-sage); }
.sv-incl-card h3 { font-family: var(--nc-serif); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--nc-green); }
.sv-incl-card p { font-size: 14px; line-height: 1.7; font-weight: 300; }

/* ── related services ────────────────────────────────────── */
.sv-related { background: var(--nc-white); padding: 96px 0; }
.sv-related-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.sv-related-head h2 { font-family: var(--nc-serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--nc-green); }
.sv-related-all { font-size: 11px; letter-spacing: 0.18em; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.sv-related-all i { font-size: 10px; }
.sv-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.sv-rel {
  background: var(--nc-ivory); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform 500ms ease, box-shadow 500ms ease;
}
.sv-rel:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(26, 60, 52, 0.28); opacity: 1; }
.sv-rel-img { height: 200px; overflow: hidden; }
.sv-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-rel-foot { padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sv-rel-foot span { font-family: var(--nc-serif); font-weight: 600; font-size: 19px; color: var(--nc-green); }
.sv-rel-foot i { font-size: 11px; color: var(--nc-green); }

/* ── booking footer ──────────────────────────────────────── */
.sv-footer-sub { font-size: 16px; font-weight: 300; color: rgba(242, 240, 230, 0.8); max-width: 520px; }

/* ── floating "Agendar" — part of the design this time ───── */
.sv-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  background: var(--nc-green); color: var(--nc-ivory); border-radius: 9999px; padding: 16px 22px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  display: inline-flex; gap: 10px; align-items: center;
  box-shadow: 0 12px 30px -8px rgba(26, 60, 52, 0.5);
  transition: opacity 300ms ease, transform 300ms ease;
}
.sv-fab:hover { opacity: .9; }
/* Once the booking footer itself is on screen, the button would point at
   what the visitor is already looking at. */
.sv-fab.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* The service header carries one more button than the home's (Agendar), so
   between 981px and ~1100px the logo and links ran out of room and broke
   onto two lines. Collapse to the menu button earlier here, keeping Agendar
   visible since it is the page's main action. Mirrors home.css at 980px. */
@media (max-width: 1120px) {
  .nc-nav-links { display: none; }
  .nc-nav .nc-account { display: none; }
  .nc-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nc-mobile-menu {
    display: none; flex-direction: column; gap: 4px;
    padding: 8px var(--nc-gutter) 20px; border-top: 1px solid rgba(26, 60, 52, 0.10);
  }
  .nc-mobile-menu.is-open { display: flex; }
  .nc-mobile-menu a:not(.nc-account) {
    padding: 14px 0; font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
    border-bottom: 1px solid rgba(26, 60, 52, 0.08);
  }
  .nc-mobile-menu .nc-account { align-self: flex-start; margin-top: 14px; }
}
@media (max-width: 980px) {
  .nc-nav .sv-book-pill { display: none; }
  .sv-arch { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .sv-hero-inner { padding-top: 64px; padding-bottom: 72px; gap: 22px; }
  /* Scales with the screen so the longest single word in any title
     ("Acompanhamento") fits on a phone instead of running off the edge. */
  .sv-hero h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .sv-hero-ctas .nc-btn { flex: 1 1 100%; }
  .sv-about, .sv-related { padding: 72px 0; }
  .sv-incl { padding-bottom: 72px; }
  .sv-about-grid { gap: 40px; }
  .sv-arch { max-width: 320px; }
  .sv-incl-card { padding: 26px; }
  .sv-fab { right: 16px; bottom: 16px; padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-fab { transition: none; }
}