/* A Leto › 04 Nossos Sócios (cards de foto em destaque) + CTA. */
/* Carrossel horizontal — flex + scroll-snap; setas/dots controlam scrollLeft via JS.
   Em desktop os 4 cards cabem (1fr cada) e não há overflow; em tablet/mobile vira carrossel. */
.page-a-leto .socios-grid {
	display: flex; flex-wrap: nowrap;
	gap: clamp(1rem, 2vw, 30px);
	padding-block: 1rem;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Esconde scrollbar nativa (estética) — dots controlam a navegação. */
	-ms-overflow-style: none; scrollbar-width: none;
}
.page-a-leto .socios-grid::-webkit-scrollbar { display: none; }
.page-a-leto .socio-card { color: inherit; scroll-snap-align: start;
	flex: 0 0 calc((100% - 3 * clamp(1rem, 2vw, 30px)) / 4); }
.page-a-leto .socio-card__photo { position: relative; display: block; aspect-ratio: 273/231; overflow: hidden; border-radius: 6px; background: var(--leto-charcoal); }
.page-a-leto .socio-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03) brightness(.98); transition: transform .6s var(--ease), filter .5s var(--ease); }
.page-a-leto .socio-card:hover .socio-card__photo img { transform: scale(1.045); filter: grayscale(1) contrast(1.06) brightness(1.02); }
.page-a-leto .socio-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; color: #fff; transition: background .3s var(--ease), transform .3s var(--ease); }
.page-a-leto .socio-card__play svg { width: 22px; height: 22px; transform: translateX(1px); }
.page-a-leto .socio-card:hover .socio-card__play { background: rgba(255,255,255,.28); transform: translate(-50%,-50%) scale(1.06); }
.page-a-leto .socio-card__name { display: block; margin-top: .9rem; font-size: 16.6px; font-weight: 500; }
.page-a-leto .socio-card__role { display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; font-size: 11.7px; color: var(--leto-gray); }
.page-a-leto .socio-card__role::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leto-green-deep); }

/* Variante sem foto (2026-06-24): card minimal com nome em destaque + cargo abaixo.
   Substitui o card fotográfico no carrossel da seção 04 enquanto o shooting institucional não chega. */
.page-a-leto .socio-card--no-photo {
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 200px;
	padding: clamp(1.2rem, 1rem + 1vw, 1.6rem);
	border: 1px solid rgba(45,45,45,.18); border-radius: 6px; background: transparent;
	transition: border-color .25s var(--ease), transform .25s var(--ease);
	text-decoration: none;
}
.page-a-leto .socio-card--no-photo:hover { border-color: rgba(45,45,45,.42); transform: translateY(-2px); }
.page-a-leto .socio-card--no-photo .socio-card__name { margin-top: 0; font-size: clamp(18px, 14px + .8vw, 22px); font-weight: 700; color: var(--leto-ink); line-height: 1.2; }
.page-a-leto .socio-card--no-photo .socio-card__role { margin-top: .55rem; font-size: 13px; }

.page-a-leto .socios-dots { display: flex; justify-content: center; gap: 8px; padding-block: clamp(1.5rem, 3vw, 36px) clamp(.5rem,1.5vw,18px); }
.page-a-leto .socios-dots[hidden] { display: none; }
.page-a-leto .socios-dots__dot { width: 26px; height: 4px; border-radius: 2px; background: rgba(45,45,45,.18);
	border: 0; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
	transition: width .25s var(--ease), background .25s var(--ease); }
.page-a-leto .socios-dots__dot:hover { background: rgba(45,45,45,.42); }
.page-a-leto .socios-dots__dot:focus-visible { outline: 2px solid var(--leto-ink); outline-offset: 3px; }
.page-a-leto .socios-dots__dot.is-active { width: 30px; background: var(--leto-ink); }

.page-a-leto .center { display: flex; justify-content: center; padding-block: clamp(2rem, 3vw, 40px); }
.page-a-leto .pill-dark { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding-inline: 2rem; border-radius: 14px; background: var(--leto-charcoal); color: #fff; font-size: 14.4px; font-weight: 500; transition: background .3s var(--ease); }
.page-a-leto .pill-dark:hover { background: #000; }

@media (max-width: 900px) {
	.page-a-leto .socio-card { flex: 0 0 calc((100% - clamp(1rem, 2vw, 30px)) / 2); }
}
@media (max-width: 560px) {
	.page-a-leto .socio-card { flex: 0 0 88%; }
}