/* Suntor — página "Reabilitação" (Figma: Reabilitação 2214:1460, frame 1440px).
   Shared pieces (.eyebrow, .decor, .cta-visit, buttons) live in site.css. */

/* app.css centres every `article > *`; keep cards intact */
.reab article > * { margin-left: 0; margin-right: 0; max-width: none; }

/* ---------- Hero ----------
   Height and photo scale with the viewport so the composition keeps the Figma
   proportions (1440px: 500px tall, photo at x=695 y=-39, 887px wide). */
.reab-hero { position: relative; overflow: hidden; height: max(34.7222vw, 500px); padding: 0 var(--gutter); background: var(--primary-50); display: flex; align-items: center; }
.reab-hero__decor { position: absolute; left: -279px; top: -389px; width: 700.638px; height: 1028.9px; pointer-events: none; -webkit-mask: url('../assets/images/reabilitacao/hero-decor-mask.svg') no-repeat 200px 370px / 671px 440px; mask: url('../assets/images/reabilitacao/hero-decor-mask.svg') no-repeat 200px 370px / 671px 440px; }
.reab-hero__decor img { display: block; width: 100%; height: 100%; }
.reab-hero__content { position: relative; z-index: 1; width: 576px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.reab-hero__text { width: 449px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.reab-hero h1 { margin: 0; font: 400 56px/1.1 var(--font-head); color: var(--primary-500); }
.reab-hero__text p { margin: 0; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); }
.reab-hero__visual { position: absolute; left: 48.2639vw; top: -2.7083vw; width: 61.6028vw; aspect-ratio: 887.08 / 937.667; pointer-events: none; }
.reab-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.reab-hero__line { position: absolute; left: 12.7296%; top: 5.7805%; width: 100%; height: 100%; }

/* ---------- Quadros atendidos ---------- */
.quadros { position: relative; overflow: hidden; padding: 104px var(--gutter); display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.quadros__intro { position: relative; width: 351px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.quadros__head { display: flex; flex-direction: column; gap: 12px; }
.quadros__intro > p { margin: 0; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); }
.quadros__list { position: relative; width: 750px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.quadro { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--neutral-900-a20); }
.quadro__icon { position: relative; flex: none; width: 48px; height: 48px; }
.quadro__icon > span, .condicao-card__icon > span { position: absolute; background: var(--primary-400); -webkit-mask: var(--icon) no-repeat 0 0 / 100% 100%; mask: var(--icon) no-repeat 0 0 / 100% 100%; }
.quadro__text { font: 600 16px/1.3 var(--font-body); color: var(--primary-800); }

/* ---------- Reabilitação por condição ---------- */
.condicoes { background: var(--primary-25); padding: 104px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 56px; }
.condicoes__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.condicoes__head p { margin: 0; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); }
.condicoes__grid { width: 100%; display: flex; gap: 24px; }
.condicao-card { flex: 1 1 0; min-width: 0; height: 354px; padding: 32px 24px; border: 1px solid var(--primary-100); border-radius: 16px; background: var(--white); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.condicao-card__body { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.condicao-card__icon { position: relative; display: block; width: 56px; height: 56px; }
.condicao-card__icon img { display: block; width: 56px; height: 56px; }
.condicao-card__icon > span { background: var(--primary-500); }
.condicao-card__texts { display: flex; flex-direction: column; gap: 8px; color: var(--primary-900); }
.condicao-card__title { font: 600 18px/1.4 var(--font-body); }
.condicao-card__text { font: 400 14px/1.4 var(--font-body); }

/* ---------- Abordagem ---------- */
.abordagem { position: relative; padding: 64px var(--gutter) 0; }
.abordagem__decor { position: absolute; left: 0; top: 0; width: 701px; height: 384px; border-radius: 0 0 32px 0; background: var(--primary-50); pointer-events: none; }
.abordagem__decor span { position: absolute; inset: 0; overflow: hidden; border-radius: 0 32px 32px 0; }
.abordagem__decor img { position: absolute; left: -202px; top: 0; width: 484.33px; height: 497.476px; }
.abordagem__card { position: relative; padding: 32px 64px 32px 32px; border-radius: 24px; background: var(--bg); display: flex; align-items: center; gap: 64px; }
.abordagem__media { flex: none; width: 608px; height: 344px; border-radius: 16px; overflow: hidden; transform: translateZ(0); }
.abordagem__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.abordagem__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.abordagem__head { display: flex; flex-direction: column; gap: 12px; }
.abordagem__copy > p { margin: 0; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); }

/* ---------- Estrutura (gallery strip) ---------- */
.reab-estrutura { padding: 104px 0; display: flex; flex-direction: column; gap: 48px; overflow: hidden; }
.reab-estrutura__head { padding: 0 var(--gutter); display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.reab-estrutura__title { width: 597px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.reab-estrutura__title .title { width: 442px; }
.reab-estrutura__head > p { width: 611px; margin: 0; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); }
/* Endless strip: two copies of the 9 photos; one copy = 9 × (416 + 16) = 3888px.
   Starts where Figma has it (strip centred on the page) and drifts left. */
.gallery { position: relative; height: 296px; }
.gallery__track { position: absolute; top: 0; left: 50%; display: flex; gap: 16px; transform: translateX(-1936px); }
.gallery__item { flex: none; width: 416px; height: 296px; margin: 0; border-radius: 16px; overflow: hidden; transform: translateZ(0); }
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* white fades on both edges */
.gallery::before, .gallery::after { content: ''; position: absolute; top: 0; z-index: 1; height: 100%; pointer-events: none; }
.gallery::before { left: -8px; width: 167px; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.gallery::after { right: 0; width: 216px; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }

/* ---------- CTA ---------- */
.cta-visit--reab { padding-top: 0; }
.cta-visit--reab .cta-visit__organic--left { left: calc(50% - 720px); }
.cta-visit--reab .cta-visit__title { width: 570px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .reab-hero { height: auto; padding-top: 72px; padding-bottom: 0; flex-direction: column; align-items: flex-start; }
  .reab-hero__content { width: min(576px, 100%); }
  .reab-hero__visual { position: relative; left: auto; top: auto; align-self: flex-end; width: min(calc(100% + var(--gutter)), 720px); margin: 40px calc(-1 * var(--gutter)) 0 0; aspect-ratio: 720 / 539; overflow: hidden; }
  .reab-hero__photo, .reab-hero__line { width: 123.2%; height: auto; aspect-ratio: 887.08 / 937.667; }
  .reab-hero__line { left: 15.68%; top: 10%; }
  .quadros { flex-direction: column; }
  .quadros__intro { width: min(560px, 100%); }
  .quadros__list { width: 100%; }
  .condicoes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .condicao-card { height: auto; min-height: 320px; gap: 24px; }
  .abordagem__card { flex-direction: column; align-items: stretch; padding: 32px; gap: 32px; }
  .abordagem__media { width: 100%; height: auto; aspect-ratio: 608 / 344; }
  .reab-estrutura__head { flex-direction: column; gap: 20px; }
  .reab-estrutura__title, .reab-estrutura__head > p { width: min(611px, 100%); }
  .reab-estrutura__title .title { width: auto; }
}

@media (max-width: 720px) {
  .reab-hero { padding-top: 48px; }
  .reab-hero h1 { font-size: 44px; }
  .quadros { padding: 56px var(--gutter); gap: 24px; }
  .quadro__text { font-size: 15px; }
  .condicoes { padding: 56px var(--gutter); gap: 32px; }
  .condicoes__head .title { font-size: 26px; }
  .condicoes__grid { grid-template-columns: 1fr; gap: 16px; }
  .condicao-card { min-height: 0; }
  .abordagem { padding-top: 40px; }
  .abordagem__decor { width: 70%; height: 240px; }
  .abordagem__card { padding: 20px; border-radius: 20px; gap: 24px; }
  .reab-estrutura { padding: 56px 0; gap: 32px; }
  .gallery { height: 220px; }
  .gallery__item { width: 300px; height: 220px; }
  .gallery::before, .gallery::after { width: 48px; }
}