/* ============================================================
 * mobile.css — Aprimoramentos de experiência mobile
 * Concórdia Tec Indústria de Máquinas
 *
 * @author    Douglas Veruck
 * @copyright 2026 Douglas Veruck — Todos os direitos reservados
 *
 * Este arquivo aprimora telas pequenas (≤ 991px) e adiciona
 * efeitos sutis em todas as telas. O layout desktop permanece
 * praticamente inalterado.
 * Portado da base mobile do projeto SkyVillage e adaptado ao
 * domínio de máquinas/produtos (prefixo ct-, paleta vermelha).
 * ============================================================ */

/* ──────────────────────────────────────────────────────────
 * EFEITOS DE ENTRADA (todas as telas, discretos)
 * ────────────────────────────────────────────────────────── */
@keyframes ctFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ctFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Segurança: se o JS não rodar em até 3s, garante que tudo apareça */
@keyframes ctSafetyShow { to { opacity: 1; } }
.ct-reveal {
  opacity: 0;
  animation: ctFadeUp .7s cubic-bezier(.16,.84,.44,1) forwards,
             ctSafetyShow 0s linear 3s forwards;
}
.ct-reveal.in,
.ct-reveal.show { opacity: 1; }
/* respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  .ct-reveal { animation: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
 * AJUSTES SOMENTE MOBILE (≤ 991px)
 * ══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Barra de topo: enxuta, centralizada ── */
  .ct-topbar { padding: .4rem 0; font-size: .76rem; }
  .ct-topbar .container { justify-content: center; }
  /* no celular, mostra só o telefone (1º span); esconde e-mail e local */
  .ct-topbar .ct-topbar-info span:nth-child(2),
  .ct-topbar .ct-topbar-info span:nth-child(3) { display: none; }

  /* ── Header / marca ── */
  .ct-header .navbar { padding: .5rem 0; }
  .ct-header .navbar-brand img { height: 42px !important; max-height: 42px; }

  /* ── Botão hambúrguer: grande, visível, tocável ── */
  .ct-header .navbar-toggler {
    border: 0; padding: .4rem; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--red-soft);
    box-shadow: none; outline: none;
  }
  .ct-header .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(227,30,36,.18); }
  .ct-header .navbar-toggler-icon { display: none; }   /* troca pelo nosso ícone */
  .ct-header .navbar-toggler::after {
    content: ""; width: 22px; height: 2px; background: var(--red);
    border-radius: 2px; position: relative;
    box-shadow: 0 -7px 0 var(--red), 0 7px 0 var(--red);
    transition: .25s;
  }

  /* ── Menu off-canvas: painel deslizante ── */
  #ctNav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 82%; max-width: 340px;
    background: #fff;
    box-shadow: -20px 0 60px rgba(30,34,48,.28);
    padding: 5.5rem 1.6rem 2rem;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.16,.84,.44,1);
    z-index: 1050; overflow-y: auto;
    display: block !important;     /* anula o collapse do Bootstrap */
    visibility: hidden;
  }
  #ctNav.ct-open { transform: translateX(0); visibility: visible; }

  /* fundo escurecido atrás do menu */
  .ct-nav-backdrop {
    position: fixed; inset: 0; background: rgba(30,34,48,.5);
    opacity: 0; visibility: hidden; transition: .3s; z-index: 1040;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .ct-nav-backdrop.ct-open { opacity: 1; visibility: visible; }

  /* botão fechar (X) dentro do menu */
  .ct-nav-close {
    position: absolute; top: 1.1rem; right: 1.1rem;
    width: 42px; height: 42px; border: 0; background: var(--red-soft);
    border-radius: 12px; color: var(--red); font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }

  /* nome da empresa no topo do painel */
  .ct-nav-head {
    position: absolute; top: 1.5rem; left: 1.6rem;
    font-family: var(--ff-display); font-size: 1.1rem; color: var(--red); font-weight: 700;
    max-width: 60%; line-height: 1.2;
  }

  /* itens do menu: grandes, espaçados, fáceis de tocar */
  #ctNav .navbar-nav { gap: .2rem; list-style: none; padding-left: 0; margin: 0; }
  #ctNav .nav-item { width: 100%; list-style: none; }
  #ctNav .nav-item::marker { content: none; }
  #ctNav .nav-link {
    font-family: var(--ff-body); font-size: 1.12rem; font-weight: 600;
    color: var(--txt) !important; padding: .95rem .6rem !important;
    border-bottom: 1px solid var(--line); border-radius: 0;
    display: flex; align-items: center; gap: .7rem;
    transition: .2s;
  }
  #ctNav .nav-link::before {
    content: "›"; color: var(--red); font-size: 1.3rem; font-weight: 700;
    opacity: .45; transition: .2s;
  }
  #ctNav .nav-link:active,
  #ctNav .nav-link.active {
    color: var(--red) !important; padding-left: 1rem !important;
  }
  #ctNav .nav-link.active::before { opacity: 1; }
  /* o link do dropdown não mostra a seta dupla do Bootstrap aqui */
  #ctNav .dropdown-toggle::after { display: none; }

  /* ── Dropdown "Produtos por categoria" dentro do off-canvas ──
     No celular ele vira uma sublista sempre visível e recuada,
     em vez do menu suspenso do desktop. */
  #ctNav .nav-item.dropdown .dropdown-menu {
    display: block; position: static; float: none;
    border: 0; box-shadow: none; padding: 0 0 .4rem 0; margin: 0;
    background: transparent;
  }
  #ctNav .dropdown-menu .dropdown-item {
    font-family: var(--ff-body); font-size: .98rem; color: var(--txt-2);
    padding: .6rem .6rem .6rem 1.7rem; border-bottom: 1px solid var(--line);
    white-space: normal; border-radius: 0;
    position: relative;
  }
  #ctNav .dropdown-menu .dropdown-item::before {
    content: "–"; position: absolute; left: .7rem; color: var(--red); opacity: .5;
  }
  #ctNav .dropdown-menu .dropdown-item:active,
  #ctNav .dropdown-menu .dropdown-item:hover {
    background: var(--red-soft); color: var(--red);
  }

  /* botões (Solicitar Orçamento) dentro do menu: largos e destacados */
  #ctNav .btn {
    width: 100%; margin: .6rem 0 0; padding: .95rem 1rem !important;
    font-size: .92rem !important; border-radius: 14px !important;
    justify-content: center; display: flex;
  }
  #ctNav .nav-item.ms-lg-3 { margin-top: .4rem; }
  #ctNav .btn::before { content: none; }

  /* ── Hero (primeira tela): proporção e respiro ── */
  .ct-hero { min-height: 84vh; }
  .ct-hero-inner { padding: 2.5rem 1.4rem; }
  .ct-hero h1,
  .ct-hero .ct-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.1; margin-bottom: 1rem;
  }
  .ct-hero p,
  .ct-hero .ct-lead { font-size: 1.02rem; line-height: 1.6; }
  /* botões do hero empilhados e largos */
  .ct-hero .ct-btn-primary,
  .ct-hero .ct-btn-outline,
  .ct-hero .ct-btn-ghost,
  .ct-hero .ct-btn-whats {
    display: block; width: 100%; text-align: center; margin: .5rem 0 0;
    padding: .95rem 1rem; font-size: .9rem;
  }

  /* ── Botões em geral: alvo de toque confortável (mín. 48px) ── */
  .ct-btn-primary, .ct-btn-outline, .ct-btn-ghost, .ct-btn-whats {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── Cards de produto: foto maior, texto legível ── */
  .ct-prod-card img,
  .ct-prod-thumb img { border-radius: 14px 14px 0 0; }
  .ct-section { padding: 2.8rem 0; }
  .ct-section h2,
  .ct-section .ct-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  /* tipografia geral: nada de letra miúda */
  body { font-size: 1rem; }

  /* ── Barra de ação fixa no rodapé (CTA sempre à mão) ──
     Solicitar Orçamento + WhatsApp */
  .ct-mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; gap: .6rem; padding: .7rem .9rem;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(30,34,48,.12);
    transform: translateY(120%); transition: transform .35s ease;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  }
  .ct-mobile-cta.ct-show { transform: translateY(0); }
  .ct-mobile-cta a {
    flex: 1; text-align: center; padding: .85rem .5rem; border-radius: 12px;
    font-family: var(--ff-body); font-weight: 700; font-size: .84rem;
    text-transform: uppercase; letter-spacing: .02em;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    text-decoration: none;
  }
  .ct-mobile-cta .cta-orcamento { background: var(--red); color: #fff; }
  .ct-mobile-cta .cta-whats { background: #25d366; color: #fff; }
  /* espaço extra no fim da página para a barra não cobrir conteúdo */
  body.has-mobile-cta .ct-footer { padding-bottom: 5.5rem; }

  /* esconde o botão flutuante redondo de WhatsApp no mobile:
     a barra fixa já tem o WhatsApp (evita dois botões sobrepostos) */
  body.has-mobile-cta .ct-whats-float { display: none !important; }
}

/* telas bem pequenas (≤ 380px): ajuste fino */
@media (max-width: 380px) {
  .ct-hero h1, .ct-hero .ct-title { font-size: 1.9rem !important; }
  .ct-mobile-cta a { font-size: .78rem; }
}

/* ══════════════════════════════════════════════════════════
 * HOME MOBILE: máquinas em destaque logo após o hero
 * (só na home, só no celular — desktop e outras páginas intactos)
 * ══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  body[data-page="home"] .ct-main {
    display: flex;
    flex-direction: column;
  }
  /* por padrão, todo filho direto da home vai para depois (order 3) */
  body[data-page="home"] .ct-main > * { order: 3; }
  /* breadcrumb (se houver) bem no topo */
  body[data-page="home"] .ct-main > .ct-breadcrumb-wrap { order: 0; }
  /* hero logo em seguida */
  body[data-page="home"] .ct-main > .ct-hero { order: 1; }
  /* seção de produtos/máquinas logo após o hero (se existir a classe) */
  body[data-page="home"] .ct-main > .ct-sec-produtos { order: 2; padding-top: 2.2rem; }
}

/* ══════════════════════════════════════════════════════════
 * EFEITOS SUTIS E ELEGANTES (mobile + desktop)
 * ══════════════════════════════════════════════════════════ */

/* Cards de produto: feedback ao tocar (mobile) + transição suave */
.ct-prod-card { transition: transform .28s cubic-bezier(.16,.84,.44,1), box-shadow .28s ease, border-color .28s ease; }
.ct-prod-card:active { transform: scale(.985); }
.ct-prod-thumb img { transition: transform .6s cubic-bezier(.16,.84,.44,1); }

/* Botões: leve afundar ao tocar (sensação tátil) */
.ct-btn-primary:active, .ct-btn-outline:active,
.ct-btn-ghost:active, .ct-btn-whats:active, .ct-mobile-cta a:active {
  transform: scale(.96);
}

/* Imagem do hero: leve zoom-in contínuo e lento (só mobile, efeito "vivo") */
@media (max-width: 991px) {
  @keyframes ctHeroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }
  .ct-hero-slide {
    animation: ctHeroZoom 8s ease-out forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct-hero-slide { animation: none; }
}

/* Reveal escalonado: quando vários cards aparecem juntos, entram em cascata */
.ct-prod-card.ct-reveal:nth-child(1) { animation-delay: 0s; }
.ct-prod-card.ct-reveal:nth-child(2) { animation-delay: .08s; }
.ct-prod-card.ct-reveal:nth-child(3) { animation-delay: .16s; }