/* ==========================================================================
   Osteopatia Campinas — Design System
   Bruno & Rodolfo Amoroso Borges
   ========================================================================== */

:root{
  /* --- Color tokens --- */
  --bg:          #FBFAF7;
  --bg-warm:     #F3F1EA;
  --surface:     #FFFFFF;
  --ink:         #11213B;
  --ink-soft:    #5A6472;
  --ink-faint:   #8891A0;

  --navy:        #142B4E;
  --navy-2:      #1E3E6E;
  --navy-deep:   #0B1930;
  --on-navy:     #FFFFFF;
  --on-navy-soft:#C6D2E4;

  --cyan:        #2E9DC2;
  --cyan-text:   #16708F;
  --cyan-soft:   #E7F3F7;
  --cyan-line:   #BFE0EC;

  --gold:        #B0813A;
  --gold-text:   #8A6224;
  --gold-soft:   #F4EADA;

  --line:        #E2DED2;
  --line-cool:   #DCE2EA;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;

  --shadow-sm:   0 2px 10px rgba(17,33,59,0.06);
  --shadow-md:   0 12px 32px rgba(17,33,59,0.10);
  --shadow-lg:   0 24px 64px rgba(11,25,48,0.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur: 380ms;
}

/* --- Reset --- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
[id]{ scroll-margin-top:92px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  font-family:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,figcaption{ font-family:'Fraunces', Georgia, serif; font-weight:500; letter-spacing:-0.012em; color:var(--ink); line-height:1.16; }
p{ max-width:65ch; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
svg{ display:block; flex-shrink:0; }
ul{ list-style:none; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }

::selection{ background:var(--cyan-soft); color:var(--navy); }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* --- Skip link --- */
.skip-link{
  position:absolute; left:16px; top:-60px; background:var(--navy); color:#fff;
  padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600; z-index:1000;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:16px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,247,0.88);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
header.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }
.nav{
  max-width:1160px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:11px; padding:6px 0; flex-shrink:0; }
.brand .brand-mark{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
/* Two lines at every width: the single-line lockup measured 425px and left
   only 14px of slack in the bar at 1440. */
.brand-text{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0;
  font-family:'Fraunces', Georgia, serif; font-size:17px; font-weight:600;
  color:var(--navy); line-height:1.2;
}
.brand-sub{
  font-family:'Instrument Sans', sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase;
}
.brand-sep{ display:none; }
.brand-sub{ color:var(--cyan-text); white-space:nowrap; }
.brand-sub{ }
.brand-name{ white-space:nowrap; }
@media (max-width:760px){
  .brand-text{ font-size:15.5px; }
}

.navlinks{ display:flex; align-items:center; gap:28px; font-size:14px; color:var(--ink-soft); font-weight:500; }
@media (max-width:1120px){ .navlinks{ gap:20px; font-size:13.5px; } }
.navlinks a{ position:relative; padding:6px 0; }
.navlinks a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--cyan);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease);
}
.navlinks a:hover{ color:var(--navy); }
.navlinks a:hover::after{ transform:scaleX(1); }
.navlinks a.active{ color:var(--navy); font-weight:600; }
.navlinks a.active::after{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:14px; }

/* ---- Booking chooser: one "Agendar" button, three people behind it ---- */
.booking{ position:relative; }
.booking-trigger{ border:0; cursor:pointer; font-family:inherit; }
.booking-chevron{ width:14px !important; height:14px !important; transition:transform var(--dur-fast) var(--ease); }
.booking.is-open .booking-chevron{ transform:rotate(180deg); }
.booking-menu{
  position:absolute; right:0; top:calc(100% + 12px); z-index:120;
  width:330px; padding:8px;
  background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  transform-origin:top right; animation:bookingIn 180ms var(--ease);
}
.booking-menu[hidden]{ display:none; }
@keyframes bookingIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.booking-title{
  margin:0; padding:10px 12px 6px; max-width:none;
  font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft);
}
.booking-option{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:var(--ink); transition:background var(--dur-fast) var(--ease);
}
.booking-option:hover, .booking-option:focus-visible{ background:var(--cyan-soft); }
.booking-option img{
  width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:center;
  flex-shrink:0; border:1px solid var(--line-cool); background:var(--surface);
}
.booking-text{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.booking-text strong{ font-size:14.5px; font-weight:600; color:var(--ink); }
.booking-text small{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.booking-go{ width:16px; height:16px; margin-left:auto; color:var(--ink-faint); flex-shrink:0;
  transition:transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.booking-option:hover .booking-go{ transform:translateX(3px); color:var(--navy); }
@media (prefers-reduced-motion: reduce){ .booking-menu{ animation:none; } }
.nav-cta{
  background:var(--navy); color:#fff; padding:10px 20px; border-radius:99px;
  font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-cta:hover{ background:var(--navy-2); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.nav-cta svg{ width:15px; height:15px; }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); align-items:center; justify-content:center; cursor:pointer;
  flex-shrink:0;
}
.nav-toggle svg{ width:19px; height:19px; color:var(--navy); }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* visibility (not just max-height) so the closed panel's links leave the tab order */
.mobile-nav{
  display:none; max-height:0; overflow:hidden; visibility:hidden; background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:max-height var(--dur) var(--ease), visibility var(--dur) step-end;
}
/* Generous cap so wrapped labels on very narrow screens are never clipped. */
.mobile-nav.is-open{ max-height:min(80vh, 620px); overflow-y:auto; visibility:visible; transition:max-height var(--dur) var(--ease), visibility 0s; }
.mobile-nav-inner{ padding:8px 24px 22px; display:flex; flex-direction:column; }
.mobile-nav a{
  padding:13px 0; font-size:15.5px; color:var(--ink); border-bottom:1px solid var(--line);
  font-weight:500;
}
.mobile-nav a.active{ color:var(--navy); font-weight:600; }
.mobile-booking{
  margin-top:18px; padding:6px; border:1px solid var(--line-cool); border-radius:var(--radius-md);
  background:var(--bg);
}
.mobile-nav .mobile-booking .booking-option{ border-bottom:0; padding:10px 12px; font-size:inherit; }

@media (max-width:1000px){
  .navlinks{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:block; }
  .nav-actions .booking{ display:none; }
}
@media (max-width:420px){
  .nav{ padding:12px 16px; gap:12px; }
  .brand{ gap:9px; }
  .brand .brand-mark{ width:34px; height:34px; }
  .brand-text{ font-size:14.5px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:99px; font-size:14.5px; font-weight:600;
  cursor:pointer; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--navy); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--navy-2); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-secondary{ border:1.5px solid var(--line-cool); color:var(--ink); background:var(--surface); }
.btn-secondary:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-block{ width:100%; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
section{ padding:88px 24px; max-width:1160px; margin:0 auto; }
.section-tight{ padding-top:56px; padding-bottom:56px; }
.eyebrow{
  font-size:12px; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold-text);
  font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:''; width:22px; height:1.5px; background:var(--gold-text); display:inline-block; }
.section-head{ max-width:600px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(26px,3.4vw,36px); margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:16px; }
.section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.centered .eyebrow{ justify-content:center; }
.section-head.centered .eyebrow::before{ display:none; }

/* The page ground is now almost white, so white bands need hairlines to read as bands. */
.bg-alt{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bg-warm{ background:var(--bg-warm); }
.bg-navy{ background:var(--navy); color:var(--on-navy); }
.bg-navy h1, .bg-navy h2, .bg-navy h3{ color:#fff; }
.bg-navy p{ color:var(--on-navy-soft); }
.full-bleed{ max-width:none; padding-left:0; padding-right:0; }

/* ==========================================================================
   Reveal animation (subtle, fast, reduced-motion aware)
   ========================================================================== */
/* Four deliberate gestures instead of one fade applied to everything:
   a hero entrance, a wipe for section headers, a wipe+settle for photography,
   and a gentle rise for the closing CTA. */
/* Opacity only: the stage runs edge to edge, so any scale or translate here
   would momentarily expose the page background at its sides on load. */
@keyframes heroIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.hero-card{ animation:heroIn 760ms var(--ease) both; }

.reveal-mask{
  clip-path:inset(0 0 100% 0); opacity:0.001;
  transition:clip-path 760ms var(--ease), opacity 380ms linear;
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal-mask.is-visible{ clip-path:inset(0 0 0 0); opacity:1; }

.reveal-img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 820ms var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal-img.is-visible{ clip-path:inset(0 0 0 0); }
.reveal-img img{
  transform:scale(1.07);
  transition:transform 1150ms var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal-img.is-visible img{ transform:none; }

.reveal-rise{
  opacity:0; transform:translateY(16px);
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal-rise.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .hero-card{ animation:none; }
  .reveal-mask, .reveal-img, .reveal-rise{ opacity:1; transform:none; clip-path:none; transition:none; }
  .reveal-img img{ transform:none; transition:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* The brand film opens the page edge to edge. Its own background is white, so
   a white stage makes any letterboxing on very wide screens invisible — the
   film reads as the page itself rather than as a framed rectangle. */
.hero-stage{
  /* Matches the film's own edge pixels (white at the top corners). */
  background:#FFFFFF; border-bottom:1px solid var(--line);
  padding:0;
  animation:heroIn 760ms var(--ease) both;
}
.hero-stage-inner{ max-width:none; margin:0; width:100%; }
.hero-video{
  position:relative; background:#FFFFFF; width:100%; overflow:hidden;
  /* The film's own 16:9. Locking the box to it means the frame always spans
     the full width with no side bars — no viewport-height cap, which is what
     was shrinking it and exposing the page behind. */
  aspect-ratio:16/9;
}
/* The box is locked to the film's own 16:9, so cover fills it exactly with no
   crop. No overscan here: this film's waves bleed to the very edges, and any
   zoom would shave them off. */
.hero-video video{
  width:100%; height:100%; object-fit:cover; background:#FFFFFF;
}
.hero-video img{ width:100%; height:100%; object-fit:cover; }

.hero-video img{ width:100%; height:100%; object-fit:contain; display:none; }
.hero-video.is-fallback video{ display:none; }
.hero-video.is-fallback img{ display:block; }

.hero{
  padding:52px 24px 40px; max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:52px; align-items:center;
}
.hero-copy .eyebrow{ margin-bottom:18px; }
.hero h1{ font-size:clamp(32px,4.4vw,50px); line-height:1.08; margin-bottom:20px; }
.hero h1 em{ font-style:normal; color:var(--navy); background:linear-gradient(180deg, transparent 62%, var(--gold-soft) 62%); }
.hero-copy > p{ font-size:17px; color:var(--ink-soft); max-width:520px; margin-bottom:30px; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-duo-card{
  background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm);
}
.duo-avatars{ display:flex; margin-bottom:16px; }
.duo-avatars img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2.5px solid var(--surface); box-shadow:var(--shadow-sm);
}
.duo-avatars img + img{ margin-left:-16px; }
.duo-text strong{
  display:block; font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:16.5px;
  color:var(--ink); margin-bottom:4px;
}
.duo-text span{ font-size:13.5px; color:var(--ink-soft); display:block; margin-bottom:16px; }

@media (max-width:960px){
  .hero{ grid-template-columns:1fr; padding-top:36px; gap:32px; }
  .hero-copy > p{ max-width:none; }
}

/* ==========================================================================
   Brand plate (static logo)
   ========================================================================== */
.brand-band{ background:#fff; padding:72px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-band-inner{ max-width:880px; margin:0 auto; text-align:center; }
.brand-band h2{ font-size:clamp(22px,2.8vw,30px); margin-bottom:12px; }
.brand-band p{ color:var(--ink-soft); font-size:15.5px; margin:0 auto; max-width:52ch; }

/* ==========================================================================
   Stats bar
   ========================================================================== */
.stats{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:32px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  max-width:1160px; margin:0 auto;
}
.stat-num{ font-family:'Fraunces', serif; font-size:clamp(22px,2.4vw,28px); color:var(--navy); font-weight:600; }
.stat-label{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   Indications grid
   ========================================================================== */
.indic-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.indic-item{
  display:flex; align-items:flex-start; gap:15px;
  background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--radius-md);
  padding:22px; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.indic-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--cyan-line); }
.indic-icon{ width:64px; height:64px; border-radius:50%; flex-shrink:0; }
.indic-body{ min-width:0; overflow-wrap:anywhere; }
.indic-item h3{ font-size:17px; font-weight:500; margin-bottom:6px; }
.indic-item p{ font-size:14px; color:var(--ink-soft); }
@media (max-width:520px){
  .indic-item{ gap:14px; padding:20px; }
  .indic-icon{ width:58px; height:58px; }
}
@media (max-width:1180px){ .indic-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .indic-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .indic-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Process steps
   ========================================================================== */
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.process-item{ position:relative; padding-top:22px; border-top:2px solid var(--cyan); }
.process-item .num{ font-family:'Fraunces', serif; color:var(--gold-text); font-size:15px; font-weight:600; }
.process-item h3{ font-size:15.5px; margin-top:8px; }
.process-item p{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; }
@media (max-width:760px){ .process-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .process-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   Professionals
   ========================================================================== */
.prof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.prof-card{
  background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--radius-lg);
  padding:30px; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.prof-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.prof-avatar{
  width:74px; height:74px; border-radius:50%; overflow:hidden; margin-bottom:18px;
  border:3px solid var(--cyan-soft);
}
.prof-avatar img{ width:100%; height:100%; object-fit:cover; }
.prof-card h3{ font-size:19px; margin-bottom:4px; }
.prof-role{ font-size:12.5px; color:var(--gold-text); margin-bottom:14px; font-weight:600; letter-spacing:0.02em; }
.prof-card p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:18px; }
.prof-link{ font-size:13.5px; color:var(--navy); font-weight:600; display:inline-flex; align-items:center; gap:6px; padding:5px 0; }
.prof-link svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.prof-link:hover svg{ transform:translateX(3px); }
@media (max-width:760px){ .prof-grid{ grid-template-columns:1fr; } }

/* Full professional bio blocks (profissionais.html) */
.prof-block{
  display:grid; grid-template-columns:240px 1fr; gap:40px;
  padding:44px 0; border-top:1px solid var(--line);
}
.prof-block:last-child{ border-bottom:1px solid var(--line); }
.prof-photo{
  width:100%; aspect-ratio:3/4; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.prof-photo img{ width:100%; height:100%; object-fit:cover; }
.prof-info h2{ font-size:24px; margin-bottom:6px; }
.prof-info .prof-role{ font-size:13px; margin-bottom:22px; }
.cred-list li{
  font-size:14.5px; color:var(--ink-soft); padding:10px 0 10px 20px;
  border-bottom:1px solid var(--line); position:relative;
}
.cred-list li:last-child{ border-bottom:none; }
.cred-list li::before{
  content:''; position:absolute; left:0; top:18px; width:6px; height:6px;
  border-radius:50%; background:var(--cyan);
}
@media (max-width:760px){
  .prof-block{ grid-template-columns:1fr; }
  .prof-photo{ max-width:200px; }
}

/* Mini gallery of teaching / clinical photos */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:12px; }
.gallery-grid a, .gallery-grid figure{ position:relative; border-radius:var(--radius-sm); overflow:hidden; display:block; margin:0; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease); }
.gallery-grid a:hover img, .gallery-grid figure:hover img{ transform:scale(1.06); }
.gallery-grid .tall{ grid-row:span 2; }
.gallery-grid .wide{ grid-column:span 2; }
@media (max-width:760px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .gallery-grid .wide{ grid-column:span 2; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.testi-card{
  background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--radius-md); padding:26px;
  display:flex; flex-direction:column; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.testi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.testi-stars{ color:var(--gold); display:flex; gap:2px; margin-bottom:14px; }
.testi-stars svg{ width:15px; height:15px; }
.testi-quote{ font-size:14.5px; color:var(--ink); flex-grow:1; margin-bottom:18px; max-width:none; }
.testi-author{ font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:14px; }
.testi-author strong{ display:block; color:var(--ink); font-family:'Fraunces', serif; font-weight:500; font-size:14.5px; }
@media (max-width:760px){ .testi-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; border-radius:var(--radius-lg);
  padding:52px 44px; display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.cta-band::after{
  content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, var(--cyan) 0%, transparent 70%); opacity:0.35;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-buttons{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:760px){
  .cta-buttons{ width:100%; }
  .cta-buttons .btn{ width:100%; }
}
.cta-band h2{ color:#fff; font-size:clamp(22px,2.6vw,28px); max-width:400px; }
.cta-band p{ color:var(--on-navy-soft); font-size:14.5px; margin-top:8px; max-width:380px; }
@media (max-width:760px){ .cta-band{ flex-direction:column; align-items:flex-start; padding:38px 28px; } }

.cta-inner{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color:#fff; border-radius:var(--radius-md); padding:30px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.cta-inner h2, .cta-inner h3{ color:#fff; font-size:18.5px; max-width:360px; }
@media (max-width:600px){ .cta-inner{ padding:26px; } }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer{ background:var(--navy-deep); color:#B9C4D6; padding:56px 24px 30px; }
.foot-grid{
  max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;
  font-size:13.5px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.10);
}
.foot-brand{ font-family:'Fraunces', serif; font-size:19px; color:#fff; font-weight:600; margin-bottom:12px; }
.foot-brand span{ color:var(--cyan); }
.foot-grid p{ color:#8fa0ba; max-width:none; }
.foot-grid h3{ font-family:'Fraunces', serif; font-size:14px; color:#fff; font-weight:500; margin-bottom:14px; }
.foot-grid a{ display:block; padding:3px 0; margin-bottom:5px; color:#B9C4D6; transition:color var(--dur-fast) var(--ease); }
.foot-grid a:hover{ color:#fff; }
.foot-social{ display:flex; gap:10px; margin-top:14px; }
.foot-social a{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; margin-bottom:0;
}
.foot-social a:hover{ background:var(--cyan); }
.foot-social svg{ width:16px; height:16px; }
.foot-bottom{
  max-width:1160px; margin:22px auto 0; font-size:12px; color:#7488A5;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.page-head{ max-width:680px; margin:0 auto; padding:52px 24px 8px; }
.page-head p{ color:var(--ink-soft); font-size:16px; margin-top:14px; }
.page-head h1{ font-size:clamp(28px,3.6vw,40px); }
.back-link{ font-size:13.5px; display:inline-flex; align-items:center; gap:6px; margin-bottom:22px; padding:5px 0; color:var(--navy); font-weight:600; }
.back-link svg{ width:14px; height:14px; }

/* ==========================================================================
   Osteopatia page
   ========================================================================== */
.content-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:60px; }
.content-grid p{ font-size:16px; color:var(--ink-soft); margin-bottom:20px; max-width:560px; }
.side-card{
  background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--radius-md); padding:28px;
  align-self:start; position:sticky; top:100px;
}
.side-card h2{ font-size:16.5px; margin-bottom:10px; }
.side-card p{ font-size:13.5px; color:var(--ink-soft); max-width:none; }
.side-card .name{ font-family:'Fraunces', serif; font-size:14px; color:var(--navy); margin-top:16px; font-weight:500; }
.indic-head{ margin:64px 0 26px; }
.indic-head h2{ font-size:clamp(22px,2.6vw,26px); }
@media (max-width:860px){
  .content-grid{ grid-template-columns:1fr; }
  .side-card{ position:static; }
}

/* ==========================================================================
   Contato page
   ========================================================================== */
.whatsapp-cards{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.wa-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--radius-md); padding:20px 22px;
  transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.wa-card:hover{ box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.wa-card .name{ font-family:'Fraunces', serif; font-size:15.5px; color:var(--ink); }
.wa-card .num{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.wa-btn{
  background:#12803F; color:#fff; font-size:13px; font-weight:600; padding:11px 18px; border-radius:99px;
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wa-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.wa-btn svg{ width:16px; height:16px; }

.info-block{ display:flex; gap:16px; margin-bottom:24px; }
.info-icon{
  width:40px; height:40px; border-radius:10px; background:var(--cyan-soft); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-icon svg{ width:19px; height:19px; }
.info-block h2{ font-size:14.5px; margin-bottom:5px; }
.info-block p{ font-size:14.5px; color:var(--ink-soft); }
.info-extra{ font-size:13.5px; margin-top:6px; color:var(--ink-faint); max-width:52ch; }
.info-block a{ color:var(--navy); font-weight:600; }

.map-block{
  margin-top:8px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line-cool);
  aspect-ratio:16/9;
}
.map-block iframe{ width:100%; height:100%; border:0; filter:grayscale(0.15) contrast(1.02); }

/* ==========================================================================
   Blog listing
   ========================================================================== */
/* One article gets the weight of a cover; the rest read as an index. */
.post-featured{
  display:block; background:var(--surface); border:1px solid var(--line-cool);
  border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-sm);
  margin-bottom:52px;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.post-featured:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.post-featured h2{ font-size:clamp(23px,3vw,31px); margin:6px 0 14px; max-width:20ch; }
.post-featured p{ font-size:16px; color:var(--ink-soft); max-width:60ch; }
.post-featured .post-date{ margin-bottom:0; }

.post-index-head{
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  font-family:'Instrument Sans', sans-serif; color:var(--ink-soft); margin-bottom:6px;
}
.post-index{ border-top:1px solid var(--line); }
.post-index a{
  display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:baseline;
  padding:17px 4px 17px 0; border-bottom:1px solid var(--line);
  transition:background var(--dur-fast) var(--ease);
}
.post-index a:hover{ background:rgba(20,43,78,0.03); }
.post-index .post-date{ margin-bottom:0; }
.post-index h3{ font-size:17px; font-weight:500; transition:color var(--dur-fast) var(--ease); }
.post-index a:hover h3{ color:var(--navy); }
@media (max-width:640px){
  .post-featured{ padding:26px; }
  .post-index a{ grid-template-columns:1fr; gap:5px; padding:15px 0; }
}

.post-date{ font-size:12px; color:var(--gold-text); font-weight:600; margin-bottom:8px; letter-spacing:0.03em; text-transform:uppercase; }
.post-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--navy); background:var(--cyan-soft);
  padding:5px 12px; border-radius:99px; margin-top:16px; font-weight:600;
}
.post-tag svg{ width:12px; height:12px; }

/* ==========================================================================
   Credentials accordion
   ========================================================================== */
/* Collapsed by script only, so the full list survives without JS. */
.cred-list.is-collapsed li.is-extra{ display:none; }
.cred-toggle{
  margin-top:12px; background:none; border:0; padding:12px 0; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--navy);
  display:inline-flex; align-items:center; gap:7px;
}
.cred-toggle svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.cred-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.cred-toggle:hover{ color:var(--navy-2); }

/* ==========================================================================
   Blog article
   ========================================================================== */
article.post{ max-width:700px; margin:0 auto; padding:44px 24px 40px; }
article.post h1{ font-size:clamp(26px,3.4vw,36px); margin-bottom:26px; }
article.post h2{ font-size:21px; margin:34px 0 14px; }
article.post p{ font-size:16.5px; color:var(--ink); margin-bottom:20px; max-width:none; overflow-wrap:anywhere; }
article.post p.author{ font-size:13.5px; color:var(--ink-soft); font-style:italic; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); }
article.post blockquote{
  border-left:3px solid var(--cyan); padding:4px 0 4px 20px; margin:28px 0; font-family:'Fraunces', serif;
  font-size:16px; color:var(--ink-soft); font-style:italic;
}
.cta-band-wrap{ max-width:700px; margin:8px auto 60px; padding:0 24px; }

/* ==========================================================================
   Misc badges / icons
   ========================================================================== */
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--navy);
  background:var(--cyan-soft); padding:7px 13px; border-radius:99px; border:1px solid var(--cyan-line);
}
.badge svg{ width:14px; height:14px; }

@media (max-width:640px){
  section{ padding:64px 20px; }
  .cta-band{ padding:34px 26px; }
}

/* ==========================================================================
   Sticky booking bar (phones only)
   ========================================================================== */
.mobile-cta{
  position:fixed; left:16px; right:16px; z-index:90;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:none; gap:10px;
  transform:translateY(160%); transition:transform 340ms var(--ease);
}
.mobile-cta-btn{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:#fff; font-size:14.5px; font-weight:600;
  padding:15px 14px; border-radius:99px; box-shadow:var(--shadow-lg);
  white-space:nowrap;
}
.mobile-cta-btn svg{ width:17px; height:17px; }
.mobile-cta.is-visible{ transform:none; }
.mobile-cta .booking{ flex:1 1 auto; }
.mobile-cta .booking-trigger{ width:100%; }
.booking--up .booking-menu{
  top:auto; bottom:calc(100% + 10px); left:0; right:0; width:auto;
  transform-origin:bottom center;
}

@media (prefers-reduced-motion: reduce){ .mobile-cta{ transition:none; } }
@media (max-width:1000px){
  .mobile-cta{ display:flex; }
  body{ padding-bottom:84px; }
}

/* ==========================================================================
   Post content: figures, tables, lists, embeds
   ========================================================================== */
.post-figure{ margin:34px 0; }
.post-figure img{
  width:100%; height:auto; border-radius:var(--radius-md);
  border:1px solid var(--line-cool); background:var(--surface);
}
.post-figure figcaption{
  font-family:'Instrument Sans', sans-serif; font-size:13.5px; color:var(--ink-soft);
  line-height:1.5; margin-top:10px; padding-left:14px; border-left:2px solid var(--cyan-line);
}
.video-embed{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-md);
  overflow:hidden; background:var(--navy-deep);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

article.post ul.post-list, article.post ol.post-list{ margin:0 0 22px; padding-left:4px; }
article.post ul.post-list li, article.post ol.post-list li{
  position:relative; padding-left:24px; margin-bottom:9px;
  font-size:16.5px; color:var(--ink); overflow-wrap:anywhere;
}
article.post ul.post-list li::before{
  content:''; position:absolute; left:4px; top:11px; width:6px; height:6px;
  border-radius:50%; background:var(--cyan);
}
article.post ol.post-list{ counter-reset:item; }
article.post ol.post-list li{ counter-increment:item; }
article.post ol.post-list li::before{
  content:counter(item) '.'; position:absolute; left:0; top:0;
  color:var(--cyan-text); font-weight:600; font-size:14px;
}

/* Wide study tables scroll inside their own box instead of breaking the page. */
.post-table{ overflow-x:auto; margin:28px 0; -webkit-overflow-scrolling:touch; }
.post-table table{ border-collapse:collapse; width:100%; min-width:420px; font-size:14.5px; }
.post-table td{
  border:1px solid var(--line-cool); padding:10px 13px; vertical-align:top;
  color:var(--ink-soft); overflow-wrap:anywhere;
}
.post-table tr:first-child td{ background:var(--cyan-soft); color:var(--ink); font-weight:600; }

article.post a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
article.post a:hover{ color:var(--cyan-text); }
article.post sup{ font-size:0.7em; vertical-align:super; }

/* The source photo is 530x801. Capping the display width keeps it inside its
   own resolution on 2x screens instead of being upscaled and going soft. */
.side-portrait{
  display:block; width:100%; max-width:265px; height:auto; margin:0 auto 18px;
  border-radius:var(--radius-sm); border:1px solid var(--line-cool);
}

/* ==========================================================================
   Cinema band — one photograph at a time, headline stays put
   ========================================================================== */
.cinema{ position:relative; background:var(--navy-deep); }
.cinema-stage{
  position:relative; width:100%;
  aspect-ratio:16/9; max-height:min(74vh, 620px);
  overflow:hidden;
}
.cinema-frames{ position:absolute; inset:0; }
.cinema-slide{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 900ms var(--ease);
}
.cinema-slide.is-active{ opacity:1; }
.cinema-slide img{ width:100%; height:100%; object-fit:cover; }

/* Scrim strong enough at the bottom for white copy over any of the photos. */
.cinema-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,16,32,0.92) 0%, rgba(6,16,32,0.72) 26%,
                    rgba(6,16,32,0.34) 55%, rgba(6,16,32,0.12) 100%),
    linear-gradient(to right, rgba(6,16,32,0.55) 0%, rgba(6,16,32,0) 62%);
}
.cinema-copy{
  position:absolute; inset:auto 0 0 0; padding:0 24px 38px;
}
.cinema-inner{ max-width:1160px; margin:0 auto; }
.cinema-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:#EBC77C; margin-bottom:12px;
}
.cinema h2{
  color:#fff; font-size:clamp(26px,3.6vw,42px); line-height:1.1;
  margin-bottom:14px; max-width:16ch;
  text-shadow:0 2px 20px rgba(6,16,32,0.5);
}
.cinema-caption{ min-height:26px; margin-bottom:22px; }
.cinema-words{ position:relative; display:block; }
.cinema-word{
  position:absolute; left:0; top:0; opacity:0; transform:translateY(6px);
  font-size:16px; font-weight:600; color:#E4EDF7; white-space:nowrap;
  transition:opacity 500ms var(--ease), transform 500ms var(--ease);
}
.cinema-word.is-active{ opacity:1; transform:none; position:relative; }

.cinema-controls{ display:flex; align-items:center; gap:18px; }
.cinema-dots{ display:flex; align-items:center; gap:9px; }
.cinema-dot{
  width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.cinema-dot::after{
  content:''; width:9px; height:9px; border-radius:99px;
  background:rgba(255,255,255,0.45);
  transition:width 300ms var(--ease), background 300ms var(--ease);
}
.cinema-dot:hover::after{ background:rgba(255,255,255,0.75); }
.cinema-dot.is-active::after{ width:24px; background:#fff; }
.cinema-dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:99px; }

.cinema-toggle{
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,0.35); background:rgba(6,16,32,0.35);
  color:#fff; display:grid; place-items:center;
  transition:background 200ms var(--ease), border-color 200ms var(--ease);
}
.cinema-toggle:hover{ background:rgba(6,16,32,0.6); border-color:rgba(255,255,255,0.6); }
.cinema-toggle svg{ width:15px; height:15px; }
.cinema-toggle .icon-play{ display:none; }
.cinema-toggle[aria-pressed="true"] .icon-pause{ display:none; }
.cinema-toggle[aria-pressed="true"] .icon-play{ display:block; }

@media (max-width:760px){
  .cinema-stage{ aspect-ratio:4/3; max-height:none; }
  .cinema-copy{ padding:0 20px 22px; }
  .cinema-caption{ margin-bottom:16px; }
  .cinema-word{ font-size:14.5px; white-space:normal; }
  .cinema-controls{ gap:12px; }
  /* Comfortable thumb targets: the dot stays small, its hit area does not. */
  .cinema-dot{ width:34px; height:44px; }
  .cinema-dots{ gap:2px; margin-left:-6px; }
  .cinema-toggle{ width:44px; height:44px; flex-shrink:0; }
  .cinema-toggle svg{ width:16px; height:16px; }
}

/* No crossfade and no auto-advance when motion is not welcome; the dots still
   work, so every photo stays reachable. */
@media (prefers-reduced-motion: reduce){
  .cinema-slide, .cinema-word{ transition:none; }
}

/* ==========================================================================
   FAQ — native <details>, so it works with the keyboard and without JS
   ========================================================================== */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:20px 2px; cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{
  font-size:17.5px; font-weight:500; margin:0; transition:color var(--dur-fast) var(--ease);
}
.faq-item summary:hover h3{ color:var(--navy); }
.faq-item summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px; }
.faq-sinal{
  position:relative; flex-shrink:0; width:22px; height:22px; margin-top:2px;
}
.faq-sinal::before, .faq-sinal::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--cyan-text);
  transform:translate(-50%,-50%); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-sinal::before{ width:13px; height:2px; }
.faq-sinal::after{ width:2px; height:13px; }
.faq-item[open] .faq-sinal::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item[open] summary h3{ color:var(--navy); }
.faq-resposta{ padding:0 2px 24px; max-width:70ch; }
.faq-resposta p{ font-size:15.5px; color:var(--ink-soft); margin:0; }
@media (prefers-reduced-motion: reduce){
  .faq-sinal::before, .faq-sinal::after{ transition:none; }
}
@media (max-width:600px){
  .faq-item summary{ gap:14px; padding:18px 2px; }
  .faq-item summary h3{ font-size:16px; }
}

/* ==========================================================================
   Pilates page
   ========================================================================== */
.prose-h2{ font-size:clamp(22px,2.6vw,28px); margin-bottom:18px; }
.pilates-side{ text-align:center; }
.pilates-side img{ width:84px; height:84px; border-radius:50%; margin:0 auto 10px; }
/* Two-class selectors: .side-card p would otherwise flatten these to body size. */
.pilates-side .pilates-side-num{
  font-family:'Fraunces', Georgia, serif; font-size:56px; line-height:1; font-weight:600;
  color:var(--navy); margin:0 auto 4px;
}
.pilates-side .pilates-side-label{
  font-size:12.5px; font-weight:700; color:var(--ink);
  text-transform:uppercase; letter-spacing:0.07em; margin:0 auto 12px;
}
.pilates-side > p{ margin-left:auto; margin-right:auto; }
.pilates-side .btn{ margin-top:18px; }
.pilates-side .pilates-side-tel{ font-size:13px; margin-top:10px; }
.btn-block{ width:100%; }

.process-row--3{ grid-template-columns:repeat(3,1fr); margin-top:56px; }
@media (max-width:760px){ .process-row--3{ grid-template-columns:1fr; } }

/* Illustrations on the benefit cards overflow their halo, so no circular clip. */
.benefit-card .indic-icon{ border-radius:0; }

.studio{ margin-top:72px; }
.studio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.studio-photo{
  margin:0; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius-md);
  background:var(--bg-warm);
}
.studio-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.studio-photo:hover img{ transform:scale(1.03); }
@media (max-width:760px){ .studio-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (prefers-reduced-motion: reduce){ .studio-photo img{ transition:none; } }

.statement{ text-align:center; padding-top:96px; padding-bottom:40px; }
.statement p{
  max-width:30ch; margin:0 auto;
  font-family:'Fraunces', Georgia, serif; font-weight:500; line-height:1.25;
  font-size:clamp(24px,3.2vw,36px); color:var(--navy);
}

.indic-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
/* The longer labels no longer fit on one line on small phones. */
@media (max-width:420px){
  .indic-actions .btn{ width:100%; white-space:normal; text-align:center; }
}

/* Eight slides: on the narrowest phones the dots give up width (never height),
   so the pause control keeps its full 44px target instead of being squeezed. */
@media (max-width:360px){
  .cinema-dot{ width:26px; }
  .cinema-dots{ gap:0; margin-left:-4px; }
}