/* ————————————————————————————————————————————————
   CARMONA — site, versão 2
   Conceito: o site é um jogo de pranchas técnicas.
   Cada seção tem um desenho de linha do universo da
   quadra — planta, corte, cota, carimbo. Número real
   no lugar de adjetivo. Tokens do design system,
   nada inventado.
   ———————————————————————————————————————————————— */

/* — Shell — */
.wrap{ max-width:var(--width-shell); margin:0 auto; padding-inline:var(--space-section); }
.sec{ padding-block:var(--space-block-lg); }
.sec--tint{ background:var(--surface-alt); }
.sec--verde{ background:var(--surface-verde); color:var(--text-on-color); }
.sec--linha{ border-top:var(--border); }

/* — Cabeça de prancha: número à esquerda, título à direita — */
.prancha{
  display:grid; grid-template-columns:minmax(120px,.28fr) 1fr; gap:var(--space-lg);
  align-items:start; margin-bottom:var(--space-lg-xl);
}
.prancha__n{
  font-family:var(--font-sans); font-size:var(--size-eyebrow);
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--text-label);
  padding-top:14px; border-top:var(--rule-topline); width:max-content;
}
.sec--verde .prancha__n{ color:var(--text-label-on-verde); border-top-color:var(--areia-sobre-cor); }

h1,h2,h3{ font-family:var(--font-serif); font-weight:var(--weight-serif-regular); letter-spacing:var(--track-title); margin:0; }
h1{ font-size:var(--size-display); line-height:var(--leading-display); max-width:var(--measure-display); }
h2{ font-size:var(--size-h1); line-height:var(--leading-display); max-width:var(--measure-title); }
h3{ font-size:var(--size-h3); line-height:var(--leading-title-sm); }
.sec--verde h2,.sec--verde h3{ color:var(--text-on-color); }

.sub{
  font-family:var(--font-serif); font-size:var(--size-quote); line-height:var(--leading-quote);
  color:var(--text-quiet); max-width:var(--measure-lede); margin:var(--space-md) 0 0;
}
.sec--verde .sub{ color:var(--text-on-color-quiet); }
p{ max-width:var(--measure-body); margin:var(--space-md) 0 0; }

.rotulo{
  font-family:var(--font-sans); font-size:var(--size-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-label);
}
.sec--verde .rotulo{ color:var(--text-label-on-verde); }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.go{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans);
     font-size:var(--size-body-lg); color:var(--link); margin-top:var(--space-md); }
.go::after{ content:"→"; margin-left:.5em; }
.sec--verde .go{ color:var(--areia-sobre-cor); }

/* — Desenho técnico: regras comuns a todo SVG do site — */
.des{ display:block; width:100%; height:auto; overflow:visible; }
/* traço com a mesma espessura em qualquer tamanho de tela */
.des *{ vector-effect:non-scaling-stroke; }
.des .t   { stroke:var(--tinta); fill:none; stroke-width:1.5; }
.des .t2  { stroke:var(--tinta); fill:none; stroke-width:3; }
.des .fino{ stroke:var(--tinta); fill:none; stroke-width:1; opacity:.55; }
.des .sai { fill:var(--saibro-claro); opacity:.22; }
.des .sai2{ fill:var(--saibro-claro); opacity:.55; }
.des .ter { stroke:var(--terracota); fill:none; stroke-width:1.5; }
.des .terf{ fill:var(--terracota); }
.des .alam{ stroke:var(--verde-rede); fill:none; stroke-width:1.5; stroke-dasharray:2 7; }
.des .cota{ stroke:var(--mute); fill:none; stroke-width:1; }
.des .cota-t{ font-family:var(--font-mono); font-size:22px; fill:var(--mute); letter-spacing:.02em; }
.des .marca-t{ font-family:var(--font-mono); font-size:36px; fill:var(--terracota); }
.des .ponto{ fill:var(--tinta); }
/* versão sobre verde: tom sobre tom, nunca papel */
.sec--verde .des .t,.sec--verde .des .fino{ stroke:var(--verde-bruma); }
.sec--verde .des .cota{ stroke:var(--verde-salva); }
.sec--verde .des .cota-t{ fill:var(--verde-salva); }

/* — Barra — */
.bar{ position:sticky; top:0; z-index:20; background:var(--surface-sticky);
      backdrop-filter:var(--blur-sticky); border-bottom:var(--border); }
.bar__in{ display:flex; align-items:center; justify-content:space-between; height:58px; gap:var(--space-md); }
.bar carmona-mark{ color:var(--tinta); }
.bar__in > a{ display:inline-flex; align-items:center; min-height:44px; }
.carimbo--3{ grid-template-columns:repeat(3,1fr); }
.nav{ display:flex; gap:var(--space-md-lg); }
.nav a{ font-family:var(--font-sans); font-size:var(--size-label); letter-spacing:var(--track-nav);
        text-transform:uppercase; color:var(--text-meta); display:inline-flex; align-items:center; min-height:44px; }
.nav a:hover,.nav a[aria-current]{ color:var(--text-accent); }

/* — Abertura — */
.hero{ padding-block:var(--space-block) var(--space-block-lg); }
.hero__topo{ display:grid; grid-template-columns:1fr auto; gap:var(--space-lg); align-items:end; }
.hero__topo carmona-mark{ color:var(--tinta); }
.reserva{ 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-lg); }
.planta{ margin-top:var(--space-block); }

/* Carimbo: o bloco de identificação de toda prancha técnica */
.carimbo{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-hairline);
  background:var(--linha); border:var(--border); margin-top:var(--space-md-lg);
}
.carimbo div{ background:var(--surface-page); padding:var(--space-sm-lg) var(--space-md);
              display:flex; flex-direction:column; gap:var(--space-micro); }
.carimbo dd{ margin:0; font-family:var(--font-mono); font-size:var(--size-mono-sm); color:var(--text-body); }
.carimbo dt{ font-family:var(--font-sans); font-size:var(--size-label-sm);
             letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-label); }

/* — Assinatura: texto e objeto lado a lado — */
.par{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-block); align-items:center; }
.par svg{ max-width:400px; justify-self:center; }
.serie{ font-family:var(--font-mono); font-size:var(--size-h1); line-height:1; color:var(--areia-sobre-cor);
        margin:0 0 var(--space-md); font-variant-numeric:tabular-nums; }

/* — Critério: quatro cortes técnicos — */
.cortes{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-hairline); background:var(--linha); border:var(--border); }
.corte{ background:var(--surface-alt); padding:var(--pad-card-sm); display:flex; flex-direction:column; gap:var(--space-sm); }
.corte svg{ margin-bottom:var(--space-sm); }
.corte h3{ font-size:var(--size-quote-sm); }
.corte p{ margin:0; font-size:var(--size-body-sm); color:var(--text-quiet); }
.corte .num{ font-size:var(--size-mono-xs); color:var(--text-meta); }

/* — Linha do tempo: a linha de fundo da quadra vira régua de datas — */
.tempo{ list-style:none; margin:var(--space-lg-xl) 0 0; padding:0; position:relative;
        display:grid; grid-template-columns:repeat(4,1fr); }
.tempo::before{ content:""; position:absolute; left:0; right:0; top:9px; height:3px; background:var(--tinta); }
.tempo li{ position:relative; padding-top:var(--space-lg); padding-right:var(--space-md); }
.tempo li::before{ content:""; position:absolute; top:0; left:0; width:1px; height:21px; background:var(--tinta); }
.tempo .num{ font-size:var(--size-mono-value); display:block; margin-bottom:var(--space-micro); }
.tempo span:last-child{ font-size:var(--size-body-sm); color:var(--text-quiet); }
.tempo li:last-child .num{ color:var(--text-accent); }

/* — Contato — */
.contato{ display:grid; grid-template-columns:1fr auto; gap:var(--space-lg); align-items:end; }
.btn{ display:inline-flex; align-items:center; min-height:48px; font-family:var(--font-sans);
      font-size:var(--size-body-sm); font-weight:var(--weight-sans-medium); letter-spacing:var(--track-nav);
      text-transform:uppercase; color:var(--text-on-color); background:var(--terracota);
      padding:0 var(--space-md-lg); transition:var(--transition-color); }
.btn:hover{ background:var(--saibro-molhado); color:var(--text-on-color); }

/* — Rodapé — */
.foot{ border-top:var(--border); padding-block:var(--space-lg-xl); }
.foot__in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-md-lg); align-items:center; }
.foot carmona-mark{ color:var(--tinta); }
.foot p{ margin:0; font-size:var(--size-caption); color:var(--text-meta); }

/* — Arquivo de família (história) — */
.arquivo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-hairline); background:var(--linha); border:var(--border); margin-top:var(--space-lg-xl); }
.arquivo-grid figure{ margin:0; background:var(--surface-page); padding:var(--space-md); }
.foto{ aspect-ratio:4/5; background:var(--surface-wash); border:var(--border);
       display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-micro); }
.arquivo-grid figcaption{ margin-top:var(--space-sm); font-size:var(--size-caption); color:var(--text-meta); }
.texto{ max-width:var(--width-reading); }
figure.ilu{ margin:var(--space-lg-xl) 0 0; }
figure.ilu img{ width:100%; max-height:520px; object-fit:contain; object-position:left; }
figure.ilu figcaption{ font-size:var(--size-caption); color:var(--text-meta); margin-top:var(--space-sm); }

/* ————————————————— Configurador ————————————————— */
.cfg{ display:grid; grid-template-columns:1.25fr .75fr; gap:var(--gap-hairline); background:var(--linha); border:var(--border); }
.cfg__view,.cfg__panel{ background:var(--surface-page); padding:var(--pad-card); }
.cfg__view{ display:flex; align-items:center; }
.fam{ border:0; margin:0 0 var(--space-md-lg); padding:0; }
.fam legend{ font-family:var(--font-sans); font-size:var(--size-label); letter-spacing:var(--track-label);
             text-transform:uppercase; color:var(--text-label); padding:0 0 var(--space-sm); }
.fam__nota{ letter-spacing:0; text-transform:none; color:var(--text-meta); font-size:var(--size-caption); }
.opt{ display:flex; flex-wrap:wrap; gap:var(--gap-hairline); background:var(--linha); border:var(--border); }
.opt button{ flex:1 1 auto; min-height:44px; font-family:var(--font-sans); font-size:var(--size-body-sm);
             color:var(--text-quiet); background:var(--surface-page); border:0; padding:0 var(--space-sm);
             cursor:pointer; text-align:left; transition:var(--transition-color); }
.opt button:hover{ background:var(--surface-alt); color:var(--text-body); }
.opt button[aria-pressed="true"]{ background:var(--terracota); color:var(--text-on-color); }
.ficha{ margin-top:var(--space-md-lg); padding-top:var(--space-md); border-top:var(--border); }
.ficha dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--space-micro) var(--space-md); }
.ficha dt{ font-family:var(--font-sans); font-size:var(--size-label); letter-spacing:var(--track-label);
           text-transform:uppercase; color:var(--text-label); }
.ficha dd{ margin:0; font-family:var(--font-mono); font-size:var(--size-mono-sm); text-align:right; }
.ficha__serie{ margin-top:var(--space-md); padding-top:var(--space-md); border-top:var(--border); }

#cena .v,#cena .ap{ display:none; }
#cena[data-linha="prego"] .v--prego,#cena[data-linha="sem"] .v--sem,
#cena[data-linha="colada"] .v--colada,#cena[data-linha="pintada"] .v--pintada,
#cena[data-rede="simples"] .v--simples,#cena[data-rede="duplo"] .v--duplo,
#cena[data-rede="fita"] .v--fita,#cena[data-rede="marca"] .v--marca,
#cena[data-rede="nome"] .v--nome{ display:block; }
#cena.ap-cadeira .ap--cadeira,#cena.ap-guardasol .ap--guardasol,#cena.ap-banco .ap--banco,
#cena.ap-galao .ap--galao,#cena.ap-cesto .ap--cesto{ display:block; }
#cena .poste,#cena .poste-cap{ fill:var(--tinta); transition:fill var(--duration) var(--ease); }
#cena[data-poste="terracota"] .poste,#cena[data-poste="terracota"] .poste-cap{ fill:var(--terracota); }
#cena[data-poste="saibro"] .poste,#cena[data-poste="saibro"] .poste-cap{ fill:var(--saibro-molhado); }
#cena[data-poste="verde"] .poste,#cena[data-poste="verde"] .poste-cap{ fill:var(--verde-cipreste); }
#cena[data-rede="fita"] .fita{ fill:var(--terracota); stroke:var(--saibro-molhado); }

/* ————————————————— Responsivo ————————————————— */
@media (max-width:980px){
  .par{ grid-template-columns:1fr; gap:var(--space-lg-xl); }
  .cortes{ grid-template-columns:1fr 1fr; }
  .cfg{ grid-template-columns:1fr; }
  .cfg__view{ position:sticky; top:58px; z-index:5; padding:var(--space-sm); overflow-x:auto; border-bottom:var(--border); }
  .cfg__view svg{ min-width:620px; }
}
@media (max-width:760px){
  .wrap{ padding-inline:var(--space-md); }
  .sec{ padding-block:var(--space-block); }
  .prancha{ grid-template-columns:1fr; gap:var(--space-md); margin-bottom:var(--space-lg); }
  h1{ font-size:48px; } h2{ font-size:var(--size-h2); }
  .sub{ font-size:var(--size-quote-sm); }
  .hero{ padding-block:var(--space-lg-xl) var(--space-block); }
  .hero__topo{ grid-template-columns:1fr; }
  .hero__topo carmona-mark{ display:none !important; } /* o script do logo força inline-block */
  .planta{ margin-top:var(--space-lg-xl); }
  .des .cota,.des .cota-t{ display:none; }        /* cota ilegível em tela pequena: o carimbo assume */
  .carimbo{ grid-template-columns:1fr 1fr; }
  .carimbo--3{ grid-template-columns:1fr; }
  .contato .btn{ justify-content:center; }
  .tempo{ grid-template-columns:1fr; }
  .tempo::before{ left:9px; right:auto; top:0; bottom:0; width:3px; height:auto; }
  .tempo li{ padding:0 0 var(--space-md-lg) var(--space-lg); }
  .tempo li::before{ top:10px; left:0; width:21px; height:1px; }
  .contato{ grid-template-columns:1fr; }
  .arquivo-grid{ grid-template-columns:1fr; }
  .nav a:not(.nav__fixo){ display:none; }
  .opt button{ flex:1 1 45%; }
}
@media (max-width:420px){
  .wrap{ padding-inline:var(--space-sm-lg); }
  h1{ font-size:42px; } h2{ font-size:34px; }
  .cortes{ grid-template-columns:1fr; }
  .serie{ font-size:var(--size-h2); }
}