/* ==========================================================================
   MARCA — JUNIOR
   Recria o linkbio antigo (WordPress/Elementor): hero em arte de ponta a
   ponta, dois cards em arte lado a lado (empilhados no celular), caixa
   branca "Modalidades" com botões cinza, carrossel de 4 fotos e faixa azul.
   ========================================================================== */

/* ---- Hero: arte inteira, sem fundo nem parallax ------------------------ */
.hero { padding: 0; }
.hero__bg { display: none; }
.hero__arte { width: 100%; line-height: 0; }
.hero__arte img { display: block; width: 100%; height: auto; }

/* ---- Cards em arte: 2 colunas coladas ---------------------------------- */
.cards {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  margin-top: 0;
}
.card { border-radius: 0; box-shadow: none; overflow: visible; }
.card img { height: auto; }
.card:hover img { transform: none; }        /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-5px);              /* igual ao hover do original */
  box-shadow: 0 16px 30px rgba(var(--sombra-rgb), .22);
  position: relative;
  z-index: 3;
}
/* entrada lateral, como o fadeInLeft / fadeInRight do original */
.card--esq.reveal { transform: translateX(-40px); }
.card--dir.reveal { transform: translateX(40px); }
.card--esq.reveal.is-visible,
.card--dir.reveal.is-visible { transform: none; }

/* ---- Modalidades ------------------------------------------------------- */
.modalidades {
  width: calc((100% - 20px) * .5);   /* 50% da área útil (1440 - 2x10) */
  margin: 40px auto 0;
  padding: 40px 10px;
  background: var(--superficie);
  text-align: center;
}
.modalidades__titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #3d3d3d;
}
.modalidades__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  margin-top: 20px;
}
.modalidades__linha--2 { margin-top: 6px; padding: 0; }   /* 20 - 14 do original */
.modalidade {
  display: inline-block;
  padding: 12px 24px;
  background: #e7eaee;
  color: #000000;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .2s ease, box-shadow .3s ease;
}
a.modalidade:hover {
  transform: translateY(-3px);
  background: #dde2e8;
  box-shadow: 0 8px 16px rgba(var(--sombra-rgb), .12);
}

/* ---- Carrossel: 4 fotos, setas brancas sobre as fotos ------------------ */
.vitrine { padding: 40px 0 0; }
.vitrine__palco { position: relative; }
.trilho {
  gap: 10px;
  padding: 0 10px;
  scroll-padding-inline: 10px;
}
.slide {
  width: calc((100% - 30px) / 4);
  scroll-snap-align: start;
  border-radius: 10px;
  background: transparent;
}
.slide__foto { aspect-ratio: 362 / 474; object-fit: cover; }

.vitrine__setas {
  position: absolute;
  inset: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.vitrine__setas button,
.vitrine__setas button:hover {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  transition: transform .2s ease;
}
.vitrine__setas button:hover { transform: scale(1.15); }
.vitrine__setas svg { width: 22px; height: 22px; }

.pontos { gap: 8px; margin-top: 20px; }
.pontos button { width: 6px; height: 6px; background: rgba(0,0,0,.2); }
.pontos button[aria-current="true"] { background: #000000; transform: none; }

/* ---- Rodapé: faixa azul ------------------------------------------------ */
.footer { margin-top: 52px; padding: 10px; }
.footer small {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 15px;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .card--esq.reveal, .card--dir.reveal { transform: none; }
  .modalidade { transition: none; }
  a.modalidade:hover { transform: none; }
}

/* ---- Tablet ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {
  .modalidades { width: calc((100% - 20px) * .73); }
}

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 767px) {
  .cards { grid-template-columns: 1fr; margin-top: 0; }
  .modalidades { width: auto; margin: 40px 10px 0; }
  .slide { width: 100%; scroll-snap-align: center; }
  .slide__foto { max-width: 362px; margin: 0 auto; border-radius: 10px; }
  .vitrine__setas { inset: 0 14px; }
}