/* Seção Sobre: carrossel vertical de fotos. A foto atual fica no centro; as vizinhas, menores e esmaecidas, aparecem em cima e embaixo. */
.pcar{position:relative;margin-top:2rem;max-width:27rem}

.pcar__view{position:relative;aspect-ratio:1 / 1.05;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%)}
.pcar__view:focus-visible{outline-offset:-2px;border-radius:1.5rem}
.pcar__list{position:absolute;inset:0}

/* cada foto é posicionada pelo atributo data-o (posição relativa à foto ativa: -2 e 2 ficam escondidas) */
.pcar__slide{position:absolute;left:8%;top:50%;width:84%;aspect-ratio:5 / 4;border-radius:1.1rem;overflow:hidden;background:var(--cream);
  transform:translateY(calc(-50% + var(--ty,0%))) scale(var(--s,1));
  transition:transform .9s var(--ease),opacity .9s var(--ease);will-change:transform,opacity;
  box-shadow:0 18px 30px -18px rgb(108 29 44 / .45)}
.pcar__slide img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.pcar__slide[data-o="0"]{--ty:0%;--s:1;opacity:1;z-index:3}
.pcar__slide[data-o="-1"]{--ty:-98%;--s:.86;opacity:.55;z-index:2;cursor:pointer}
.pcar__slide[data-o="1"]{--ty:98%;--s:.86;opacity:.55;z-index:2;cursor:pointer}
.pcar__slide[data-o="-2"]{--ty:-185%;--s:.76;opacity:0;z-index:1;pointer-events:none}
.pcar__slide[data-o="2"]{--ty:185%;--s:.76;opacity:0;z-index:1;pointer-events:none}

/* etiqueta na foto ativa (como no exemplo) */
.pcar__tag{position:absolute;left:.9rem;bottom:.9rem;max-width:calc(100% - 1.8rem);padding:.5rem .9rem;border-radius:999px;
  background:rgb(36 28 30 / .62);box-shadow:inset 0 0 0 1px rgb(251 248 242 / .14);
  color:var(--paper);font:500 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(.4rem);transition:opacity .6s var(--ease) .25s,transform .6s var(--ease) .25s}
.pcar__slide[data-o="0"] .pcar__tag{opacity:1;transform:none}

/* pausar/continuar (movimento automático precisa poder ser pausado) */
.pcar__toggle{position:absolute;right:1.1rem;bottom:1.1rem;z-index:4;display:none;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;
  border:1px solid rgb(251 248 242 / .55);background:rgb(36 28 30 / .55);color:var(--paper);cursor:pointer;
  transition:background-color .3s,transform .35s var(--ease)}
.js .pcar__toggle{display:grid}
.pcar__toggle:hover{background:rgb(36 28 30 / .8)}
.pcar__toggle:active{transform:scale(.94)}
.pcar__toggle .ico{width:1.1rem;height:1.1rem}
.pcar__toggle .i-play{display:none}
.pcar__toggle[aria-pressed="true"] .i-play{display:block}
.pcar__toggle[aria-pressed="true"] .i-pause{display:none}

/* tablet/celular: coluna única; o card preenche o celular, mas não passa de 30rem em telas médias */
@media(max-width:899px){.pcar{max-width:30rem}}
@media(prefers-reduced-motion:reduce){.pcar__slide,.pcar__tag{transition:none}}