/* ============================================================
   OITO-80 , service.css  (crosstraining, pilates, personal,
                            fisioterapia, nutricao)
   ============================================================ */

/* ── SERVICE HERO ── */
.svc-hero {
  position: relative;
  height: 92vh; min-height: 580px;
  overflow: hidden; display: flex; align-items: flex-end;
}
.svc-hero-media { position: absolute; inset: 0; }
.svc-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.svc-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.1) 100%);
}
.svc-hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max-w);
  margin: 0 auto; padding: 0 48px 80px;
}
.svc-hero-num {
  font-family: var(--font-display);
  font-size: 120px; font-weight: 800;
  color: rgba(255,255,255,.06);
  line-height: 1; letter-spacing: .02em;
  position: absolute; right: 48px; bottom: 60px;
}
.svc-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.svc-tag::before { content:''; width:20px; height:2px; background:var(--blue); flex-shrink:0; }
.svc-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px,6vw,80px);
  font-weight: 800; text-transform: uppercase;
  line-height: .93; letter-spacing: .015em;
  color: var(--white); margin-bottom: 24px;
}
.svc-lead {
  font-size: 18px; font-weight: 300;
  color: rgba(255,255,255,.7);
  max-width: 520px; line-height: 1.7; margin-bottom: 40px;
}

/* ── INTRO SPLIT ── */
.intro-split { display: grid; grid-template-columns: 1fr 1fr; }
.intro-split.rev { direction: rtl; }
.intro-split.rev > * { direction: ltr; }
.intro-text { padding: 88px 64px; background: var(--white); }
.intro-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px,3vw,42px);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; line-height: .95; margin-bottom: 28px;
}
.intro-body {
  font-size: 16px; font-weight: 400;
  line-height: 1.85; color: #555; margin-bottom: 16px;
}
.intro-media { position: relative; overflow: hidden; min-height: 480px; }
.intro-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease);
}
.intro-media:hover img { transform: scale(1.04); }

/* ── BENEFITS ── */
.benefits { background: var(--gray-f5); padding: 96px 48px; }
.benefits-inner { max-width: var(--max-w); margin: 0 auto; }
.benefits-header {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 80px; margin-bottom: 64px; align-items: start;
}
.benefits-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px,4vw,56px);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; line-height: .95;
}
.benefits-intro { font-size: 16px; font-weight: 400; line-height: 1.8; color: #555; padding-top: 8px; }
.benefits-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
}
.benefit-card {
  background: var(--white); padding: 36px 32px;
  transition: background .3s;
}
.benefit-card:hover { background: var(--black); }
.benefit-card:hover .benefit-title,
.benefit-card:hover .benefit-text { color: var(--white); }
.benefit-card:hover .benefit-text { color: rgba(255,255,255,.6); }
.benefit-icon {
  width: 38px; height: 38px; background: var(--blue);
  border-radius: 2px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.benefit-icon svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2; }
.benefit-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 10px; transition: color .3s;
}
.benefit-text { font-size: 14px; font-weight: 400; line-height: 1.75; color: #666; transition: color .3s; }

/* ── FULL-WIDTH IMAGE STRIP ── */
.img-strip { height: 52vh; min-height: 360px; overflow: hidden; position: relative; }
.img-strip img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.img-strip:hover img { transform: scale(1.03); }
.img-strip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(1,45,170,.45) 0%, transparent 55%);
}

/* ── FOR WHOM ── */
.for-section { background: var(--black); padding: 96px 48px; }
.for-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start;
}
.for-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px,3.5vw,48px);
  font-weight: 800; text-transform: uppercase;
  color: var(--white); letter-spacing: .02em; line-height: .95;
}
.for-items { display: flex; flex-direction: column; }
.for-item {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.for-item:first-child { border-top: 1px solid rgba(255,255,255,.06); }
.for-dot {
  width: 6px; height: 6px; background: var(--blue);
  border-radius: 50%; margin-top: 8px; flex-shrink: 0;
}
.for-title { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.for-desc { font-size: 14px; font-weight: 300; color: rgba(255,255,255,.45); line-height: 1.65; }

/* ── SERVICE CTA ── */
.svc-cta { background: var(--blue); padding: 96px 48px; text-align: center; }
.svc-cta-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px,5vw,68px);
  font-weight: 800; text-transform: uppercase;
  color: var(--white); line-height: .95; margin-bottom: 20px;
}
.svc-cta-body {
  font-size: 17px; font-weight: 300;
  color: rgba(255,255,255,.7);
  max-width: 460px; margin: 0 auto 40px; line-height: 1.7;
}
.svc-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .svc-hero-content { padding: 0 24px 60px; }
  .intro-split, .intro-split.rev { grid-template-columns: 1fr; direction: ltr; }
  .intro-text { padding: 56px 32px; }
  .intro-media { min-height: 300px; }
  .benefits-header { grid-template-columns: 1fr; gap: 28px; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .for-inner { grid-template-columns: 1fr; gap: 40px; }
  .benefits { padding: 64px 24px; }
  .for-section { padding: 64px 24px; }
  .svc-cta { padding: 64px 24px; }
}
@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .svc-h1 { font-size: 34px; }
}

/* ── intro-media images always fill their grid cells ── */
.intro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.intro-media:hover img { transform: scale(1.04); }

/* Prevent transform on media cells during reveal animation */
.intro-media.reveal-left,
.intro-media.reveal-right {
  transform: none !important;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.intro-media.reveal-left.in,
.intro-media.reveal-right.in {
  opacity: 1;
}

/* Flush sections */
section.intro-split {
  margin: 0;
  padding: 0;
}