/*
 * Valeria Gomes — blue identity skin
 * Load this file AFTER the original CSS from clinicajoanaozi-v2.prototipo.dev.
 * It preserves the final dark-luxury skin and only remaps its color system.
 */

:root {
  /* Canonical Valeria palette */
  --vg-navy-950: #06142a;
  --vg-navy-900: #0a2142;
  --vg-navy-800: #102f59;
  --vg-navy-700: #183f70;
  --vg-royal-700: #1d4ed8;
  --vg-royal-600: #2563eb;
  --vg-royal-500: #3b82f6;
  --vg-sky-300: #93c5fd;
  --vg-sky-200: #bfdbfe;
  --vg-sky-100: #dbeafe;
  --vg-ivory-50: #fffdf7;
  --vg-ivory-100: #f8f3e8;
  --vg-muted-dark: #b8c7da;
  --vg-line-dark: #28466b;
  --vg-surface-dark: #0d2648;

  /* landing.html / exact live-site token mapping */
  --teal: var(--vg-royal-600);
  --teal-700: var(--vg-royal-700);
  --teal-dark: var(--vg-navy-900);
  --teal-light: var(--vg-sky-300);
  --wa: var(--vg-royal-600);
  --wa-700: var(--vg-royal-700);
  --bg: var(--vg-navy-950);
  --mint: var(--vg-navy-800);
  --mint-soft: #081b36;
  --surface: var(--vg-surface-dark);
  --ink: var(--vg-ivory-50);
  --muted: var(--vg-muted-dark);
  --line: var(--vg-line-dark);
  --line-light: rgba(255, 253, 247, 0.18);
  --coral: var(--vg-sky-300);
  --white: var(--vg-ivory-50);
  --shadow-sm: 0 1px 2px rgba(2, 8, 23, 0.42), 0 6px 16px rgba(2, 8, 23, 0.34);
  --shadow-md: 0 14px 34px rgba(2, 8, 23, 0.48);
  --shadow-lg: 0 30px 70px rgba(2, 8, 23, 0.58);
  --shadow: 0 30px 80px rgba(2, 8, 23, 0.34);

  /* assets/site.css token dialect, kept for safe reuse */
  --forest-950: var(--vg-navy-950);
  --forest-900: var(--vg-navy-900);
  --forest-800: var(--vg-navy-800);
  --teal-600: var(--vg-royal-700);
  --teal-500: var(--vg-royal-600);
  --mint-200: var(--vg-sky-200);
  --mint-100: var(--vg-sky-100);
  --cream: var(--vg-ivory-100);
  --cream-2: var(--vg-ivory-50);
  --coral-soft: var(--vg-sky-200);
}

html {
  color-scheme: dark;
}

body {
  background: var(--vg-navy-950);
  color: var(--vg-ivory-50);
}

/* Focus and persistent text accents */
:focus-visible,
.on-dark :focus-visible,
.btn-wa:focus-visible {
  outline-color: var(--vg-sky-200);
}

.brand .k,
.nav a:hover,
.hero h1 em,
.hero-mini b,
.svc-link,
.svc .kicker,
.quote-card .who,
.info-item a,
.map-link {
  color: var(--vg-sky-300);
}

/* Header and first viewport */
.topbar {
  background: #030b17;
  color: #cfd9e6;
  border-bottom-color: #172f50;
}

.site-head {
  background: rgba(6, 20, 42, 0.86);
}

.site-head.is-stuck {
  border-color: var(--vg-line-dark);
  box-shadow: 0 6px 20px rgba(2, 8, 23, 0.55);
}

.hero::before {
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(59, 130, 246, 0.16) 0, rgba(59, 130, 246, 0) 55%),
    radial-gradient(90% 70% at 6% 100%, rgba(147, 197, 253, 0.09) 0, rgba(147, 197, 253, 0) 60%);
}

.rating-badge,
.signature,
.svc,
.quote-card,
.member,
.depo-v,
.tst,
.g-head,
.rev-card,
.res-card,
.res-disclaimer {
  background: var(--vg-surface-dark);
}

.rating-badge,
.badge-years {
  border-color: var(--vg-line-dark);
}

.badge-years {
  background: #030b17;
}

/* Actions: all primary actions follow Valeria's royal blue identity */
.btn-wa,
.wa-fab {
  background: var(--vg-royal-600);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.38);
}

.btn-wa:hover,
.wa-fab:hover {
  background: var(--vg-royal-700);
  box-shadow: 0 16px 34px rgba(29, 78, 216, 0.46);
}

.btn-ghost {
  color: var(--vg-ivory-50);
}

.btn-ghost:hover {
  color: var(--vg-sky-300);
  background: rgba(147, 197, 253, 0.08);
  border-color: var(--vg-sky-300);
}

.btn-light {
  color: var(--vg-navy-900);
  background: var(--vg-ivory-50);
}

/* Dark section rhythm from the final Joana site, now navy */
.trust,
.trust-item,
.reels,
.convenio {
  background: var(--vg-navy-900);
}

.convenio {
  border-top-color: rgba(255, 253, 247, 0.08);
}

.about {
  background: linear-gradient(180deg, var(--vg-navy-950) 0, #081b36 100%);
}

.sedacao {
  background: #081b36;
}

.eyebrow,
.cred-list .ck,
.res-badge,
.info-item .ic {
  color: var(--vg-sky-300);
  background: var(--vg-navy-800);
}

summary::after {
  border-right-color: var(--vg-sky-300);
  border-bottom-color: var(--vg-sky-300);
}

.pill,
.chip,
.bnav {
  color: #d7e3f2;
  background: var(--vg-surface-dark);
}

.chip[aria-pressed="true"] {
  color: #fff;
  background: var(--vg-royal-600);
  border-color: var(--vg-royal-600);
}

.figure,
.hero-portrait,
.destaque-media .frame,
.map-frame,
.hero-media::after,
.destaque-media::after {
  background: var(--vg-navy-800);
}

.figure-cap {
  color: var(--vg-sky-100);
  background: rgba(6, 20, 42, 0.86);
}

.reel,
.reel-vid,
.depo-v video,
.res-media {
  background: var(--vg-navy-950);
}

.reel::after {
  background: linear-gradient(180deg, rgba(6, 20, 42, 0) 40%, rgba(6, 20, 42, 0.88) 100%);
}

.ptag {
  color: var(--vg-ivory-50);
  background: rgba(6, 20, 42, 0.92);
}

.ptag.depois {
  color: #fff;
  background: var(--vg-royal-600);
}

.folha.side-right .fold {
  background: linear-gradient(to right, rgba(6, 20, 42, 0.68), rgba(6, 20, 42, 0) 52%);
}

.folha.side-left .fold {
  background: linear-gradient(to left, rgba(6, 20, 42, 0.68), rgba(6, 20, 42, 0) 52%);
}

/* Replace the remaining green-tinted supporting copy */
.on-dark .micro,
.trust-label,
.reels .shead .lead,
.reel .cap small,
.convenio .lead,
.value-list span,
.convenio-cta p,
.final p,
.site-foot,
.foot-bottom,
.disclaimer,
.book-status {
  color: var(--vg-muted-dark);
}

.reels .eyebrow,
.value-list .ck {
  color: var(--vg-sky-200);
}

.foot-col h3,
.foot-col h4 {
  color: #93aac7;
}

.foot-col a,
.foot-col p {
  color: #d7e3f2;
}

.site-foot {
  background: #030b17;
  border-top-color: #172f50;
}

.wa-dock {
  background: linear-gradient(180deg, rgba(6, 20, 42, 0), rgba(6, 20, 42, 0.94) 40%);
}

.wa-dock .btn {
  box-shadow: 0 -2px 20px rgba(2, 8, 23, 0.58), 0 10px 24px rgba(37, 99, 235, 0.36);
}

.hero-portrait img {
  object-position: 50% 8%;
}

.about .figure img {
  object-position: 50% 0%;
}

@media (min-width: 760px) {
  .reel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * Compatibility skin for the alternate index.html + assets/site.css build.
 * The exact live reference uses .site-head, not .site-header; this branch only
 * prevents bad contrast if the older architecture is opened by itself.
 */
html:has(.site-header):not(:has(.site-head)) {
  color-scheme: light;
  --ink: #101c33;
  --muted: #53637a;
  --line: rgba(16, 28, 51, 0.16);
  --white: var(--vg-ivory-50);
}

html:has(.site-header):not(:has(.site-head)) body {
  color: #101c33;
  background: var(--vg-ivory-50);
}

html:has(.site-header):not(:has(.site-head)) .button-primary,
html:has(.site-header):not(:has(.site-head)) .floating-contact {
  background: var(--vg-royal-600);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.3);
}

html:has(.site-header):not(:has(.site-head)) .button-primary:hover,
html:has(.site-header):not(:has(.site-head)) .floating-contact:hover {
  background: var(--vg-royal-700);
}

/*
 * Direção final: base editorial clara e natural.
 * O azul permanece na identidade e nas ações, sem dominar o fundo inteiro.
 */
:root {
  --bg: #f6f4ef;
  --ink: #18212e;
  --muted: #5f6b78;
  --line: #d9dee4;
  --mint: #e6edf4;
  --mint-soft: #f0f2f4;
  --surface: #ffffff;
  --teal: #286aa3;
  --teal-700: #1f587f;
  --teal-dark: #14283a;
  --teal-light: #286aa3;
  --wa: #286aa3;
  --wa-700: #1f587f;
  --coral: #6b91ad;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px rgba(20, 40, 58, 0.05), 0 8px 24px rgba(20, 40, 58, 0.07);
  --shadow-md: 0 16px 38px rgba(20, 40, 58, 0.11);
  --shadow-lg: 0 30px 70px rgba(20, 40, 58, 0.16);
}

html {
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--ink);
}

h1,
h2,
h3,
.brand-text .n {
  color: var(--ink);
}

.topbar {
  background: #14283a;
  color: #dbe4ec;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.site-head {
  background: rgba(250, 249, 246, 0.94);
  border-bottom-color: rgba(24, 33, 46, 0.08);
}

.site-head.is-stuck {
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(20, 40, 58, 0.09);
}

.brand-text .k,
.brand .k {
  color: var(--teal-700);
}

.nav a {
  color: #56616d;
}

.nav a:hover,
.hero h1 em,
.svc-link,
.svc .kicker,
.quote-card .who,
.map-link {
  color: var(--teal-700);
}

.hero {
  background: #f6f4ef;
}

.hero::before {
  background:
    radial-gradient(90% 80% at 88% 10%, rgba(40, 106, 163, 0.10) 0, rgba(40, 106, 163, 0) 56%),
    radial-gradient(70% 60% at 5% 100%, rgba(201, 185, 158, 0.15) 0, rgba(201, 185, 158, 0) 65%);
}

.hero-portrait,
.hero-media::after,
.figure,
.destaque-media .frame,
.map-frame {
  background: #dde5eb;
}

.btn-wa,
.wa-fab {
  background: var(--teal);
  box-shadow: 0 12px 28px rgba(40, 106, 163, 0.24);
}

.btn-wa:hover,
.wa-fab:hover {
  background: var(--teal-700);
  box-shadow: 0 16px 34px rgba(31, 88, 127, 0.28);
}

.btn-ghost {
  color: var(--ink);
  border-color: #cbd3da;
}

.btn-ghost:hover {
  color: var(--teal-700);
  background: #ffffff;
  border-color: var(--teal);
}

.eyebrow,
.cred-list .ck,
.info-item .ic {
  color: var(--teal-700);
  background: #e5edf3;
}

.about {
  background: #ffffff;
}

#rotina {
  background: #f6f4ef;
}

.sedacao {
  background: #eef1f3;
}

.signature,
.svc,
.quote-card,
.member,
.depo-v,
.tst,
.g-head,
.rev-card,
.res-card,
.res-disclaimer,
.pill,
.chip,
.bnav {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line);
}

.signature .who,
.res-card figcaption p,
.book-status,
.micro,
.pill,
.svc p,
details p {
  color: var(--muted);
}

.figure-cap {
  color: #ffffff;
  background: rgba(20, 40, 58, 0.84);
}

.res-media {
  background: #e8ecef;
}

.reels {
  background: #19354d;
}

.reels h2,
.reels .shead h2,
.reels .shead .lead,
.reels .cap,
.reels .cap small {
  color: #f8fafc;
}

.reels .shead .lead,
.reels .cap small {
  color: #c8d5df;
}

.reels .eyebrow {
  color: #e7eff5;
  background: rgba(255, 255, 255, 0.11);
}

.convenio {
  background: #285475;
  border-top-color: rgba(255, 255, 255, 0.10);
}

.convenio h2,
.convenio h3,
.convenio .lead,
.convenio .value-list span,
.convenio-cta p {
  color: #ffffff;
}

.convenio .lead,
.convenio .value-list span,
.convenio-cta p {
  color: #dce7ee;
}

.convenio-cta {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

details {
  border-bottom-color: var(--line);
}

summary {
  color: var(--ink);
}

.final {
  background: #286aa3;
}

.final h2,
.final p,
.final .micro {
  color: #ffffff !important;
}

.site-foot {
  background: #14283a;
  color: #bfcbd5;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.foot-col h3,
.foot-col h4 {
  color: #dbe4ec;
}

.foot-col a,
.foot-col p,
.foot-brand p,
.foot-bottom,
.disclaimer {
  color: #bfcbd5;
}

.wa-dock {
  background: linear-gradient(180deg, rgba(246, 244, 239, 0), rgba(246, 244, 239, 0.96) 42%);
}