/**
 * Ajustes responsivos sincronizados com o export mobile do Figma Make.
 * Mantidos separados do bundle Tailwind para facilitar QA e atualizações.
 */

@media (max-width: 767px) {
  /* Home: artes verticais, CTAs e ritmo de 48px entre seções. */
  [data-hero] .ca-home-hero-button { max-width: 320px; width: 100%; }
  .ca-home-lancamentos { padding-bottom: 24px !important; padding-top: 48px !important; }
  .ca-home-categories { padding-bottom: 8px !important; padding-top: 24px !important; }
  .ca-home-brands { padding-bottom: 24px !important; padding-top: 24px !important; }
  .ca-home-why { overflow-x: hidden; padding-bottom: 24px !important; padding-top: 24px !important; }
  .ca-home-why__text h2,
  .ca-home-why__text p { margin-right: 0 !important; }
  .ca-home-where__content { padding-top: 24px !important; }
  .ca-home-where__text { max-width: none; }
  .ca-home-where__text p { margin-right: 0 !important; }
  .ca-home-where__mobile-markers { padding-bottom: 48px !important; }

  /* A composição mobile usa cards quadrados e a mesma animação reversível do desktop. */
  .ca-home-launch-mobile .ca-home-product-card { aspect-ratio: 1 / 1 !important; }

  /* Categorias compactas: trilho alcança a borda direita e preserva respiro final. */
  .ca-category-band { padding-bottom: 24px; padding-top: 24px; }
  .ca-central-hero + .ca-category-band { padding-top: 48px; }
	.ca-category-band .ca-page-shell { padding-left: 24px; padding-right: 24px; }
  .ca-category-grid { margin-right: -24px; }
  .ca-category-grid::after { content: ""; display: block; flex: 0 0 20px; min-width: 20px; }

  /* Carrosséis: mostra uma prévia do próximo card e estabiliza o gesto no iOS. */
  .ca-showcase { padding-bottom: 24px; padding-top: 24px; }
  .ca-showcase__viewport { overflow: visible; touch-action: none; }

  /* Benefícios fecha o intervalo do showcase sem alterar o respiro antes do footer. */
  .ca-benefits { padding-top: 24px; }

  /* Central: leque de quatro cards também no mobile; os externos voltam na fileira. */
  .ca-central-hero { padding-bottom: 40px; }
  .ca-central-hero__viewport {
    -webkit-overflow-scrolling: auto;
    height: 300px;
    overflow: hidden;
    overscroll-behavior-x: contain;
    padding: 16px 0;
    scrollbar-width: auto;
    touch-action: pan-y;
    user-select: none;
  }
  .ca-central-hero__track { transition: transform .9s var(--ca-ease); }
  .ca-central-card,
  .ca-central-hero.is-mounted:not(.is-aligned) .ca-central-card:not(.ca-central-card--extra),
  .ca-central-hero.is-aligned .ca-central-card {
    left: var(--slot-x, 0px);
  }
  .ca-central-card {
    opacity: 0;
    transform: translate3d(var(--mobile-stack-x, 0px), 260px, 0);
  }
  .ca-central-hero.is-mounted:not(.is-aligned) .ca-central-card[data-central-index="1"],
  .ca-central-hero.is-mounted:not(.is-aligned) .ca-central-card[data-central-index="2"],
  .ca-central-hero.is-mounted:not(.is-aligned) .ca-central-card[data-central-index="3"],
  .ca-central-hero.is-mounted:not(.is-aligned) .ca-central-card[data-central-index="4"] {
    opacity: 1;
    transform: translate3d(var(--mobile-fan-x, 0px), var(--mobile-fan-y, 0px), 0) rotate(var(--mobile-fan-r, 0deg));
    z-index: var(--mobile-fan-z, 1);
  }
  .ca-central-hero:not(.is-aligned) .ca-central-card[data-central-index="0"],
  .ca-central-hero:not(.is-aligned) .ca-central-card[data-central-index="5"] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  .ca-central-hero.is-aligned .ca-central-card {
    opacity: 1;
    transform: none;
    visibility: visible;
    z-index: 1;
  }
  .ca-central-hero__fade { display: none; }

  /* The One: arte vertical, texto centralizado e produto/nome como uma unidade. */
  .ca-theone-hero {
    background-image: var(--hero-bg-mobile);
    background-position: center;
    min-height: 760px;
  }
  .ca-theone-hero__inner {
    align-items: center;
    gap: 72px;
    justify-content: flex-start;
    padding-bottom: 40px;
    padding-top: 96px;
  }
  .ca-theone-hero__copy { align-items: center; text-align: center; }
  .ca-theone-hero__copy p { margin-left: auto; margin-right: auto; }
  .ca-theone-hero__copy .ca-page-button { align-self: center; }
  .ca-theone-hero__stage {
    flex: 0 0 auto;
    height: calc(58.88vw + 6px);
    width: 100%;
  }
  .ca-theone-product {
    inset: 0 auto auto 50%;
    transform: translateX(-50%) scale(.4);
  }
  .ca-theone-product.is-active { transform: translateX(-50%) scale(1); }
  .ca-theone-product figcaption { top: calc(100% + 12px); }
  .ca-theone-story { padding-bottom: 24px; padding-top: 48px; }
}

@media (max-width: 479px) {
  .ca-central-hero__viewport { --card-w: 132px; }
}