.clinic {
  margin: 0 12px; border-radius: var(--radius); background: var(--lino-claro); color: var(--ebano);
  padding: clamp(40px, 4.5vw, 64px) 0 clamp(36px, 4vw, 56px);
}
.clinic__head { display: grid; grid-template-columns: auto minmax(0, 380px); justify-content: space-between; gap: 24px 60px; align-items: end; margin-bottom: clamp(30px, 4vw, 48px); }
.clinic__head .title { font-size: clamp(34px, 4.2vw, 60px); }
.clinic__head .title > span { display: block; white-space: nowrap; }
.clinic__head p { color: var(--topo-oscuro); }

.clinic__reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: min(68vh, 600px); }
.cam { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--ebano); }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .cam:hover video { transform: scale(1.04); } }
.cam::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 50%, rgba(0,0,0,.72) 100%); }

.cam__meta {
  position: absolute; z-index: 2; top: 16px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; gap: 10px;
  font: 500 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(249,248,246,.85);
}
.cam__rec { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.cam__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0574f; animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .2; } }

.cam__cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; color: var(--alabastro); }
.cam__cap h3 { font-size: clamp(20px, 1.9vw, 28px); text-transform: uppercase; line-height: 1.05; }
.cam__cap p { margin-top: 8px; max-width: 34ch; font-size: 14.5px; line-height: 1.5; color: rgba(249,248,246,.8); }
.cam__line { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.12); }
.cam__line i { display: block; height: 100%; background: var(--alabastro); transform-origin: left; transform: scaleX(0); }

.clinic__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 22px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--topo-oscuro);
}
.clinic__foot a { color: var(--ebano); display: inline-flex; align-items: center; gap: 10px; }
.clinic__foot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .clinic__foot a:hover svg { transform: rotate(45deg); } }

@media (max-width: 1000px) {
  .clinic__head { grid-template-columns: 1fr; }
  .clinic__head .title > span { white-space: normal; }
}
@media (max-width: 900px) {
  .clinic { margin: 0 8px; }
  .clinic__reel {
    display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .clinic__reel::-webkit-scrollbar { display: none; }
  .cam { flex: 0 0 74vw; aspect-ratio: 9 / 15; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .cam video { transition: none; }
  .cam__rec::before { animation: none; }
}