/* ============================================================
   mobile-fix.css — Estabilidade das animações no celular (iOS Safari)
   ------------------------------------------------------------
   No mobile as animações de entrada (opacity + transform + blur +
   clip-path) do site quebravam: o conteúdo sumia, cards saíam de
   posição e a tela tremia/piscava (clip-path/blur + scroll suave são
   instáveis no Safari iOS).

   Aqui o conteúdo já NASCE no estado final — igual ao desktop depois
   da animação: visível, no lugar certo, sem jank — e continua visível
   mesmo que o JS de reveal não rode. Os carrosséis (Swiper / track)
   NÃO são tocados, então continuam deslizando normalmente.

   Carregar SEMPRE por último (depois de todos os outros CSS).
   ============================================================ */

@media (max-width: 768px) {

  /* NOTA: os efeitos de reveal de TEXTO (letras/palavras aparecendo —
     [data-reveal], .text-fx, .reveal-word/-heading/-card/-kicker e o hero
     por caractere) FICAM ATIVOS no celular (o usuário pediu o efeito). Eles
     usam IntersectionObserver, que é confiável no iOS Safari; o que quebrava
     antes era o overflow horizontal (corrigido) e o lusion clip-path (abaixo,
     ainda neutralizado). Failsafe em JS (reveal.js) garante que nada fique
     invisível caso o observer não dispare. */

  /* Reveals laterais (data-reveal left/right) entram pela VERTICAL no
     celular — o translateX(±40px) deles fazia a página passar de 390px
     (jiggle horizontal no iOS). Mantém o efeito de aparecer, sem overflow. */
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(28px);
  }
  [data-reveal="left"].is-visible,
  [data-reveal="right"].is-visible {
    transform: translateY(0);
  }

  /* Cards/textos DENTRO de carrossel (Swiper) sempre visíveis: o próprio
     carrossel é a "entrada", e o reveal-on-scroll deixava slides inativos
     (fora da tela) invisíveis — ao deslizar apareceria card em branco. */
  .swiper-slide .reveal-card,
  .swiper-slide.reveal-card,
  .swiper-slide [data-reveal],
  .swiper-slide .text-fx,
  .swiper-slide .reveal-word,
  .swiper-slide .reveal-word .word-anim {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Sufixo "+" das estatísticas (ficava invisível quando o contador
     não completava no iOS). Mostra no estado final. */
  .stat-item__suffix {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ── (4) lusion-fx: project-item / showcase-card ───────────
     Ficavam invisíveis (clip-path inset 100% + blur) quando o
     reveal não disparava no iOS. Mostra no estado final. */
  html.lusion-fx-ready .project-item,
  html.lusion-fx-ready .project-item:not(.is-revealed),
  html.lusion-fx-ready .showcase-card[data-lusion],
  html.lusion-fx-ready .showcase-card[data-lusion]:not(.is-revealed) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transition: none !important;
  }

  /* Pulse infinito em títulos (treme no iOS + gasta bateria) */
  h1.text-fx.is-visible,
  .section-header__title.text-fx.is-visible,
  .home-cta__title.text-fx.is-visible {
    animation: none !important;
  }

  /* ── HERO: forçar coluna única ─────────────────────────────
     O hero usa grid 2-col (1.18fr 0.92fr) com !important, que vencia
     a regra mobile de 1 coluna. No iPhone (vídeo na col-2 carregado) o
     conteúdo era espremido numa faixa estreita à esquerda. Aqui volta
     a 1 coluna: texto em cima, card de vídeo embaixo, largura total. */
  .hero--fluid.hero--scrub {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 0 !important;
    align-items: start !important;
  }
  .hero--scrub .hero__col--left {
    padding-inline-start: 0 !important;
    align-items: flex-start !important;
  }

  /* ── Hero: informações um pouco menores ────────────────────
     "móveis planejados" e o kicker estavam grandes (kicker quebrava
     em 2 linhas pelo letter-spacing largo). */
  /* especificidade casa com .hero--fluid.hero--scrub .hero__name (hero-fluid)
     que usa 8vw !important — por isso o seletor completo aqui. */
  .hero--fluid.hero--scrub .hero__name,
  .hero__name {
    font-size: clamp(1.05rem, 5.4vw, 1.45rem) !important;
  }
  /* Remove o kicker "ATELIER · POUSO REDONDO · DESDE 2006" no celular */
  .hero__kicker { display: none !important; }

  /* Logo + nome logo abaixo do status "Fora do horário" (apertado) */
  .hero--fluid.hero--scrub .hero__wordmark { gap: 10px !important; }
  .hero__status { margin-bottom: 4px !important; }

  /* Sobe o card de vídeo (menos espaço entre os botões e o card) */
  .hero--fluid.hero--scrub {
    row-gap: 12px !important;
    gap: 12px !important;
  }
  .hero__cta {
    padding: 5px 5px 5px 20px !important;
  }
  .hero__cta-label {
    font-size: 10px !important;
    letter-spacing: 2.2px !important;
  }

  /* ── Reel "Cada peça por inteiro": cards menores, SEM cortar ─
     Os vídeos são 16:9 (1920×1080) e ficavam num card 4/5 (retrato),
     cortando muito as laterais + altos demais (~425px). Card em 16:9
     = mesma proporção do vídeo → mostra inteiro, sem corte, e fica
     bem menor (~191px). */
  /* Reel "Cada peça por inteiro": FLEX coluna, cards menores e espaçamento
     100% uniforme. O grid assimétrico do desktop (cells deslocadas em
     translateY + legenda em fluxo de altura variável) criava gaps diferentes
     entre os cards. Aqui: cells sem deslocamento, legenda vira OVERLAY (não
     altera a altura), então cada card-unidade tem a MESMA altura → gaps iguais. */
  .reel-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: min(270px, 80vw) !important;   /* cards menores */
    margin-inline: auto !important;
    margin-block-start: 8px !important;
    gap: 16px !important;
  }
  .reel.reel--asym .reel-cell,
  .reel.reel--asym .reel-cell--a,
  .reel.reel--asym .reel-cell--b,
  .reel.reel--asym .reel-cell--c,
  .reel.reel--asym .reel-cell:hover,
  .reel.reel--asym .reel-cell--a:hover,
  .reel.reel--asym .reel-cell--b:hover,
  .reel.reel--asym .reel-cell--c:hover {
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }
  .reel.reel--asym .reel-card,
  .reel.reel--asym .reel-card--a,
  .reel.reel--asym .reel-card--b,
  .reel.reel--asym .reel-card--c {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    transform: none !important;
  }
  /* Legenda (ESTANTE/MARCENARIA/ENCAIXE + número) escondida no celular —
     a pedido. Sem ela, a cell tem a altura do card → gaps uniformes. */
  .reel.reel--asym .reel-caption {
    display: none !important;
  }
  /* Gap título "Cada peça por inteiro" → cards (estavam colados/sobrepostos). */
  .reel-head { margin-block-end: 24px !important; }

  /* ── Filtro da galeria: não fixar no celular ───────────────
     A barra de filtros era position:sticky e ficava "colada" no topo
     ao rolar, flutuando por cima dos cards (atrapalhava a visão).
     No celular rola junto com o conteúdo. */
  .gallery-filter-wrap {
    position: static !important;
    top: auto !important;
    margin-block: var(--sp-4) var(--sp-6) !important;
  }

  /* ── Tamanho das imagens / cards no celular ────────────────
     Imagens herdavam aspect-ratios de desktop/tablet e ficavam
     gigantes (ou cortando rostos). Aqui ficam em proporções sãs. */

  /* Foto do casal (sócios): a regra ≤1024px forçava 16/9 e cortava
     os rostos. Volta para 3/4 = mesma proporção da foto (600×800),
     então mostra o casal inteiro sem corte. */
  .assinatura__img-wrap {
    /* proporção EXATA da foto (1066×1600) → object-fit:cover preenche sem
       cortar nada. Antes era 3/4 e cortava um pouco no topo/base. */
    aspect-ratio: 1066 / 1600 !important;
    max-width: 270px !important;   /* foto dos donos um pouco menor */
    max-height: none !important;
    margin-inline: auto !important;
  }
  .assinatura__img {
    object-position: center center !important;
  }

  /* ── Página "Sobre Nós": espaçamentos harmonizados ─────────
     O gap entre o título do hero e a foto do casal era enorme (~176px).
     Reduz o respiro do hero e o topo da seção → sobe o card; e equilibra
     o padding das demais seções (nem colado, nem longe). */
  .page-hero {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 26px !important;
  }
  .sobre-historia { padding-block: 28px 48px !important; }
  .sobre-valores,
  .sobre-equipe,
  .sobre-numeros { padding-block: 50px !important; }
  .ambiente-cta { padding-block: 44px !important; }

  /* Foto do casal na página "Sobre Nós" — mesmo tamanho da home (270px) e
     proporção exata da foto (1066×1600) → menor, sem corte, sem perder
     qualidade (a imagem original é maior que o tamanho exibido). */
  .sobre-historia__img-stack {
    max-width: 270px !important;
    margin-inline: auto !important;
  }
  .sobre-historia__img-main--casal {
    aspect-ratio: 1066 / 1600 !important;
    width: 100% !important;
    height: auto !important;   /* anula height="667" do HTML → aspect manda */
    object-position: center !important;
  }

  /* Imagens "Quase duas décadas" (2 colunas): estavam ~533px de
     altura (slivers gigantes). Proporção 3/4 deixa compactas. */
  .home-about__img {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
  }
  .home-about__img-wrap {
    height: auto !important;
  }

  /* Card de vídeo do hero: era ~709px de altura. Limita. */
  .hero__video-card {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 58svh !important;
  }

  /* ── Hambúrguer: linhas douradas (design system) ───────────
     As linhas eram brancas e sumiam no header claro. Dourado fica
     visível no creme (fechado) e no overlay escuro (aberto), e
     combina com o anel. Vence o !important do theme-light por
     carregar por último. */
  .hamburger__line,
  .site-header.is-scrolled .hamburger__line {
    background: var(--cor-dourado) !important;
  }

  /* ── Menu do hambúrguer no design system Luz ───────────────
     Os links do menu agora seguem a identidade do site: serifa
     (Cormorant) em creme com brilho dourado (mesmo efeito de glow
     dos títulos), e o item em foco/ativo vira dourado itálico —
     igual aos destaques "especial / habita / móveis" do site. */
  .nav-mobile__list { gap: 13px !important; }
  .nav-mobile__link {
    display: inline-block !important;
    min-width: 210px;
    background: #efe7d8 !important;        /* bege */
    color: #1C1713 !important;             /* letras pretas */
    font-family: var(--ff-display) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: 0.015em !important;
    padding: 11px 30px !important;
    border-radius: 12px !important;
    text-align: center;
    text-shadow: none !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(201,148,58,0.25) !important;
  }
  .nav-mobile__link:hover,
  .nav-mobile__link:active,
  .nav-mobile__link[aria-current="page"] {
    background: var(--cor-dourado-claro) !important;  /* ativo: destaque dourado */
    color: #1C1713 !important;
    box-shadow: 0 8px 26px rgba(201,148,58,0.4), inset 0 0 0 1px rgba(201,148,58,0.5) !important;
  }

  /* ── Formulários um pouco menores ──────────────────────────
     Campos eram 58px de altura + textarea 140px + espaçamentos
     largos = formulário gigante. Compacta MANTENDO font-size 16px
     (abaixo disso o iOS dá zoom ao focar o campo). */
  /* especificidade casa com theme-light `.cta-form input{padding:...!important}` */
  .cta-form input, .cta-form select, .cta-form textarea,
  .home-cta__form input, .home-cta__form select, .home-cta__form textarea,
  .contato-form input, .contato-form select, .contato-form textarea,
  .form-input, .form-select, .form-textarea {
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }
  .form-textarea,
  .cta-form textarea,
  .contato-form textarea { min-height: 80px !important; }

  /* ── Página orçamento: ordem mobile = FORMULÁRIO → MAPA → INFORMAÇÕES ──
     (antes era info → mapa → form). */
  .contato-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-6) !important;
  }
  .contato-form-wrap { order: 1 !important; }
  .contato-info {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-4) !important;
  }
  .contato-info > * { order: 2 !important; }
  .contato-info > .contato-map { order: 1 !important; }

  /* Formulário um pouco menor (estava enorme) */
  .contato-form-wrap { padding: 18px !important; }
  .contato-form-wrap__title { font-size: 1.25rem !important; margin-bottom: 4px !important; }
  .contato-form-wrap__subtitle { font-size: 0.82rem !important; }
  .contato-form,
  .contato-form__row { gap: 10px !important; }
  .form-field { gap: 4px !important; }
  .cta-form,
  .contato-form { gap: 12px !important; }
  .contato-form-wrap { padding: var(--sp-5) !important; }
}