/* Cromarte — papel e tinta.
   Cores tiradas do EPS oficial (CorelDRAW): laranja #F5821F, preto #231F20. */
:root{
  --papel:#FBFAF7; --papel-2:#F0EEE9;
  --tinta:#231F20; --tinta-2:#6B6862;
  --linha:#DCD8D0;
  --marca:#F5821F;              /* laranja da marca, extraido do EPS oficial */
  --medida:34rem;               /* ~70 caracteres */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:Archivo,system-ui,-apple-system,sans-serif;
  font-size:clamp(16px,1.05vw + 13px,18px); line-height:1.55;
  font-variation-settings:"wdth" 100;
}
h1,h2,h3{margin:0; font-weight:600; line-height:1.05; letter-spacing:-.015em}
h1,h2{font-variation-settings:"wdth" 118}   /* largura de cartaz */
p{margin:0}
a{color:inherit}
img,iframe{display:block;max-width:100%}

.topo{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:1.15rem clamp(1.25rem,5vw,4.5rem);
  border-bottom:1px solid var(--linha);
}
.marca{margin-right:auto; line-height:0}
.topo-local{color:var(--tinta-2); font-size:.9rem}
.zap{
  text-decoration:none; font-weight:600; font-size:.95rem;
  padding:.5rem .95rem; border:1.5px solid var(--tinta); border-radius:2px;
}
.zap:hover{background:var(--tinta); color:var(--papel)}

/* ---------- abertura ---------- */
.abre{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
  padding:clamp(3rem,7vw,6.5rem) clamp(1.25rem,5vw,4.5rem);
}
h1{font-size:clamp(2.1rem,5.2vw,4.1rem)}
.promessa{
  margin-top:1.4rem; font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:600;
  padding-left:.9rem; border-left:4px solid var(--marca);
}
.sub{margin-top:.7rem; color:var(--tinta-2); max-width:var(--medida)}
.acoes{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2rem}
.botao,.botao-linha{
  text-decoration:none; font-weight:600; font-size:1rem;
  padding:.8rem 1.4rem; border-radius:2px; border:1.5px solid var(--tinta);
}
.botao{background:var(--tinta); color:var(--papel)}
.botao:hover{background:var(--marca); border-color:var(--marca)}
.botao-linha:hover{background:var(--papel-2)}

/* Formatos em proporcao REAL entre si (A0 e o dobro de area do A1, etc.) */
/* ---------- tipos de impressao (hero) ----------
   Substituiu a pilha de formatos A0..cartao a pedido do dono (02/09): ele quis ver O QUE
   imprimimos, nao o TAMANHO. Icones monoline; `.ac` marca o traco que recebe a cor da marca
   — um acento por icone, senao o laranja vira ruido e nada se destaca. */
.tipos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--linha); border:1px solid var(--linha);
}
.tipos li{
  background:var(--papel); padding:1.5rem 1.2rem;
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-start;
}
.tipos svg{
  width:46px; height:46px; flex:none;
  fill:none; stroke:var(--tinta); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.tipos svg .ac{stroke:var(--marca)}
.tipos span{font-size:.9rem; line-height:1.25; font-weight:600; color:var(--tinta)}

/* ---------- tabela ---------- */
.tabela-secao,.passos-secao{padding:clamp(2.5rem,5vw,4.5rem) clamp(1.25rem,5vw,4.5rem)}
.tabela-secao{background:var(--papel-2); border-block:1px solid var(--linha)}
.tabela-secao h2,.passos-secao h2,.chegar-info h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:1.5rem}
.tabela{width:100%; border-collapse:collapse; font-size:.98rem}
.tabela th{
  text-align:left; font-weight:600; color:var(--tinta-2);
  padding:0 0 .6rem; border-bottom:1.5px solid var(--tinta); font-size:.88rem;
}
.tabela td{padding:.85rem 0; border-bottom:1px solid var(--linha); vertical-align:top}
.tabela td:first-child{font-weight:600; padding-right:1rem}
.tabela td:nth-child(2){color:var(--tinta-2); padding-right:1rem}
.tabela td:last-child{white-space:nowrap; text-align:right}
.nota{margin-top:1.3rem; color:var(--tinta-2); max-width:var(--medida)}

/* ---------- passos: numeracao porque E sequencia ---------- */
.passos{list-style:none; margin:0; padding:0; counter-reset:p;
  display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.passos li{counter-increment:p; padding-top:2.6rem; position:relative}
.passos li::before{
  content:counter(p); position:absolute; top:0; left:0;
  font-weight:700; font-size:1.05rem; color:var(--marca);
  border-top:3px solid var(--marca); padding-top:.5rem; width:100%;
}
.passos h3{font-size:1.1rem; margin-bottom:.4rem}
.passos p{color:var(--tinta-2)}

/* ---------- localizacao ---------- */
.chegar{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:start;
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.25rem,5vw,4.5rem);
}
address{font-style:normal; font-size:1.1rem; line-height:1.5; margin-bottom:1.6rem}
.dados{display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; margin:0 0 1.8rem}
.dados dt{color:var(--tinta-2); font-size:.92rem}
.dados dd{margin:0; font-size:.98rem}
.dados a{text-decoration-color:var(--linha); text-underline-offset:3px}
.dados a:hover{text-decoration-color:var(--marca)}
.mapa{border:1px solid var(--tinta); background:var(--papel-2)}
.mapa iframe{width:100%; height:clamp(19rem,42vh,26rem); border:0}

.rodape{
  padding:2rem clamp(1.25rem,5vw,4.5rem); border-top:1px solid var(--linha);
  color:var(--tinta-2); font-size:.9rem; display:flex; gap:.5rem 2rem; flex-wrap:wrap;
}

@media (max-width:820px){
  .abre,.chegar{grid-template-columns:1fr}
  .abre{padding-top:2.5rem}
  .topo-local{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
:focus-visible{outline:3px solid var(--marca); outline-offset:3px}