/*
 * Movimento e ajustes de celular da landing (landing.html).
 * Os atributos data-lm-* e as classes lm-* são colocados por landing-motion.js.
 * Sem o script (ou com prefers-reduced-motion) a página continua completa e visível.
 */

:root {
  --lm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lm-laranja: 232, 89, 12;
}

/* ---------- Animações de entrada (só com movimento permitido) ---------- */

@keyframes lm-up {
  from { opacity: 0; translate: 0 26px; }
}
@keyframes lm-phone {
  from { opacity: 0; translate: 0 52px; scale: 0.96; }
}
@keyframes lm-row {
  from { opacity: 0; translate: 22px 0; }
}
@keyframes lm-pop {
  0% { opacity: 0; translate: 0 30px; }
  60% { opacity: 1; translate: 0 -8px; }
  100% { translate: 0 0; }
}
@keyframes lm-ring {
  0% { box-shadow: 0 0 0 0 rgba(var(--lm-laranja), 0.45); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(var(--lm-laranja), 0); }
}
@keyframes lm-glow {
  50% { box-shadow: 0 0 0 4px rgba(var(--lm-laranja), 0.2); }
}

/* Revelar ao rolar. O estado inicial só existe depois que o JS terminou de marcar. */
.lm-ready [data-lm]:not(.lm-in) { opacity: 0; }
.lm-ready [data-lm].lm-in {
  animation: lm-up 0.7s var(--lm-ease) var(--lm-delay, 0ms) backwards;
}

/* Hero: entra assim que a página abre. */
.lm-ready [data-lm-hero="up"] { animation: lm-up 0.8s var(--lm-ease) var(--lm-delay, 0ms) backwards; }
.lm-ready [data-lm-hero="phone"] { animation: lm-phone 1s var(--lm-ease) var(--lm-delay, 0ms) backwards; }
.lm-ready [data-lm-hero="row"] { animation: lm-row 0.6s var(--lm-ease) var(--lm-delay, 0ms) backwards; }
.lm-ready [data-lm-hero="pop"] { animation: lm-pop 0.9s var(--lm-ease) var(--lm-delay, 0ms) backwards; }

/* Painel: o pedido novo respira e o selo "1 novo" pulsa. */
.lm-ready [data-lm-glow].lm-in {
  animation:
    lm-up 0.7s var(--lm-ease) var(--lm-delay, 0ms) backwards,
    lm-glow 2.6s ease-in-out 1.4s infinite;
}
.lm-ready [data-lm-ping] { animation: lm-ring 2.2s ease-out infinite; }

/* Botão principal do WhatsApp chama a atenção sem atrapalhar a leitura. */
.lm-ready [data-lm-pulse] { animation: lm-ring 2.8s ease-out 1.8s infinite; }

.lm-ready .lm-num { font-variant-numeric: tabular-nums; }

/* Hover só onde existe mouse. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lm-ready [data-lm-card],
  .lm-ready a[href*="wa.me"] {
    transition:
      translate 0.25s var(--lm-ease),
      box-shadow 0.25s var(--lm-ease),
      color 0.15s,
      background-color 0.15s,
      border-color 0.15s;
  }
  .lm-ready [data-lm-card]:hover {
    translate: 0 -4px;
    box-shadow: 0 14px 28px rgba(30, 28, 24, 0.1);
  }
  .lm-ready a[href*="wa.me"]:hover {
    translate: 0 -2px;
    box-shadow: 0 8px 18px rgba(var(--lm-laranja), 0.28);
  }
  .lm-ready a[href*="wa.me"]:active { translate: 0 0; }
}

/* ---------- Carrossel, "ver mais" e botão fixo (só no celular) ---------- */

.lm-pontos,
.lm-mais,
.lm-fab { display: none; }

@media (max-width: 767px) {
  /* Menos respiro entre as seções. */
  main .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
  main .pb-20 { padding-bottom: 3rem; }
  main .pb-24 { padding-bottom: 3.5rem; }
  main .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  main .py-12 { padding-top: 2rem; padding-bottom: 2rem; }
  main .mt-12 { margin-top: 1.5rem; }
  main .mt-10 { margin-top: 1.5rem; }

  /* Hero mais compacto: o celular de exemplo encolhe e os destaques ficam numa linha. */
  [data-lm-hero-texto] { font-size: 2.2rem; line-height: 1.1; }
  [data-lm-hero-lista] { margin-top: 1.25rem; font-size: 14px; column-gap: 1rem; row-gap: 0.25rem; }
  [data-lm-hero-botoes] { margin-top: 1.5rem; }
  [data-lm-hero-p] { margin-top: 1rem; font-size: 1rem; }
  [data-lm-hero-visual] { zoom: 0.86; margin-top: -1rem; }

  /* Cartões em carrossel com encaixe, em vez de uma coluna longa. */
  [data-lm-carrossel] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--lm-sangria, 1rem));
    padding-inline: var(--lm-sangria, 1rem);
    scroll-padding-inline: var(--lm-sangria, 1rem);
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-lm-carrossel]::-webkit-scrollbar { display: none; }
  [data-lm-carrossel] > * {
    flex: 0 0 82%;
    scroll-snap-align: center;
    margin: 0;
  }
  [data-lm-carrossel] > [data-lm-card] { padding: 1.25rem; }

  .lm-pontos {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 0.75rem;
  }
  .lm-pontos span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(24, 24, 27, 0.18);
    transition: width 0.2s, background-color 0.2s;
  }
  .lm-pontos span.lm-ativo { width: 18px; background: rgb(var(--lm-laranja)); }
  .lm-pontos.lm-escuro span { background: rgba(255, 255, 255, 0.25); }

  /* Listas longas mostram as quatro primeiras e abrem sob demanda. */
  [data-lm-mais]:not(.lm-aberto) > :nth-child(n + 5) { display: none; }
  .lm-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 1.25rem;
    border: 1px solid rgba(var(--lm-laranja), 0.4);
    border-radius: 12px;
    background: transparent;
    color: #c2410c;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  .lm-mais:active { background: #fff7ed; }

  /* FAQ mais justo. */
  main details.px-6 { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; }

  /* Botão fixo do WhatsApp depois que o do hero sai da tela. */
  .lm-fab {
    display: inline-flex;
    position: fixed;
    z-index: 40;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    box-shadow: 0 10px 24px rgba(30, 28, 24, 0.25);
    opacity: 0;
    visibility: hidden;
    translate: 0 24px;
    transition: opacity 0.25s, translate 0.25s var(--lm-ease), visibility 0s linear 0.25s;
  }
  .lm-fab.lm-visivel {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
  }
  .lm-rodape { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-fab, .lm-pontos span { transition: none; }
}