/* ————————————————————————————————————————————————
   CARMONA — site, versão 4
   Uma página só: abertura, portfólio, história, contato.
   Pensada primeiro para o celular; as animações da v3
   seguem iguais (v3.js), mais o contador da galeria.
   ———————————————————————————————————————————————— */

/* — Barra: as três seções sempre visíveis, inclusive no celular — */
.nav--v4{ gap:var(--space-md); }
.nav--v4 a{ display:inline-flex !important; }

/* — Portfólio: trilho que desliza no celular, grade no desktop — */
.galeria{ outline:none; }
.galeria__trilho{
  list-style:none; margin:0; padding:0 var(--space-section);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-hairline);
  max-width:var(--width-shell); margin-inline:auto;
}
.placa figure{ margin:0; height:100%; display:flex; flex-direction:column;
               background:var(--surface-page); border:var(--border); }
.placa__img{ aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
             padding:var(--space-md); background:var(--surface-page); }
.placa__img img{ width:100%; height:100%; object-fit:contain; }
.placa__img--des{ background:var(--surface-alt); padding:var(--space-lg); }
.placa--verde .placa__img{ background:var(--surface-verde); }
.placa--verde .des .t,.placa--verde .des .fino{ stroke:var(--verde-bruma); }
.placa figcaption{ padding:var(--space-md) var(--space-md) var(--space-md-lg); border-top:var(--border);
                   display:flex; flex-direction:column; gap:var(--space-micro); }
.placa .num{ font-size:var(--size-mono-xs); color:var(--text-meta); }
.placa h3{ font-size:var(--size-quote-sm); }
.placa p{ margin:var(--space-micro) 0 0; font-size:var(--size-body-sm); color:var(--text-quiet); }
.galeria__dica{ display:none; }

/* — História — */
.relato{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg-xl) var(--space-block);
         margin-top:var(--space-block); align-items:start; }
.relato article{ display:flex; flex-direction:column; gap:var(--space-sm); }
.relato article p{ margin:0; color:var(--text-quiet); }
.relato h3{ font-size:var(--size-h3); }
.relato__retrato{ margin:0; grid-row:span 2; }
.relato__retrato img{ width:100%; height:auto; object-fit:contain; }
.relato__retrato figcaption{ font-family:var(--font-sans); font-size:var(--size-label); letter-spacing:var(--track-label);
                             text-transform:uppercase; color:var(--text-label); margin-top:var(--space-sm); }

.fecho .sub{ margin-top:var(--space-sm); }

/* — Contato — */
.contato--v4{ display:flex; flex-wrap:wrap; gap:var(--space-sm); grid-template-columns:none; }
.btn--linha{ background:transparent; color:var(--text-body); border:var(--border); }
.btn--linha:hover{ background:var(--surface-alt); color:var(--text-body); }

/* — Rodapé — */
.foot__links{ display:flex; flex-wrap:wrap; gap:0 var(--space-md); }
.foot__links a{ display:inline-flex; align-items:center; min-height:44px; }

/* ————————————————— Celular ————————————————— */
@media (max-width:760px){
  .bar carmona-mark{ max-width:118px; }
  .nav--v4{ gap:var(--space-sm); }
  .nav--v4 a{ font-size:11px; letter-spacing:.14em; }

  .galeria{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
            scrollbar-width:none; overscroll-behavior-x:contain; }
  .galeria::-webkit-scrollbar{ display:none; }
  .galeria__trilho{ display:flex; gap:var(--space-sm); width:max-content; max-width:none;
                    padding:0 var(--space-md); }
  .placa{ width:82vw; max-width:360px; scroll-snap-align:center; }
  .galeria__dica{ display:flex; gap:var(--space-sm); align-items:center; margin-top:var(--space-md);
                  font-family:var(--font-sans); font-size:var(--size-label); letter-spacing:var(--track-label);
                  text-transform:uppercase; color:var(--text-label); }

  .relato{ grid-template-columns:1fr; gap:var(--space-lg); margin-top:var(--space-lg-xl); }
  .relato__retrato{ grid-row:auto; max-width:320px; }

  .contato--v4 .btn{ flex:1 1 100%; justify-content:center; }
  .foot__in{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:360px){
  .nav--v4 a{ letter-spacing:.08em; }
}