/* 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.) */
.formatos{
  margin:0; position:relative; aspect-ratio:119/84; width:100%;
  background:var(--papel-2); border:1px solid var(--linha);
}
/* Cada formato se ancora no canto inferior esquerdo, entao o espaco livre de cada um
   e o canto SUPERIOR DIREITO — e la que o rotulo cabe sem colidir com o formato menor.
   Na primeira versao os rotulos ficavam embaixo e se escondiam uns atras dos outros:
   a pilha virava caixa abstrata em vez de tamanho de papel. */
.f{
  position:absolute; left:0; bottom:0;
  background:var(--papel); border:1px solid var(--tinta);
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start;
  gap:.05rem; padding:.35rem .45rem; overflow:hidden; text-align:right;
}
.f span{font-weight:700; font-size:clamp(.65rem,1.1vw,.95rem); line-height:1}
.f em{font-style:normal; font-size:.68rem; color:var(--tinta-2); line-height:1}
.f-a0{width:100%;    height:100%;   background:transparent; border-width:1.5px}
.f-a0 span{font-size:clamp(.8rem,1.5vw,1.15rem)}
.f-a1{width:70.7%;   height:70.7%}
.f-a2{width:50%;     height:50%}
.f-a3{width:35.4%;   height:35.4%}
.f-a4{width:25%;     height:25%}
.f-cartao{
  width:10.6%; height:5.95%; border-color:var(--marca); border-width:1.5px;
  justify-content:center; align-items:center; padding:0; text-align:center;
}
.f-cartao span{font-size:.6rem}

/* ---------- 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}