/* Meritissimo — paginas de area atendida (/areas/) */

.area-route{
  border-left:4px solid var(--gold);
  background:var(--cream-deep);
  padding:18px 20px;
  margin:0 0 34px;
  border-radius:0 4px 4px 0;
}
.area-route-label{
  font-family:var(--body); font-size:var(--f-xs); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--burgundy);
  margin:0 0 6px;
}
.area-route p+p{margin-top:6px}
.area-route p:nth-of-type(2){font-size:var(--f-lg); font-family:var(--display); font-weight:700}
.area-route p:last-child{color:var(--soft); font-size:var(--f-sm)}

section h2[data-pt]{
  font-family:var(--display); text-transform:uppercase; color:var(--burgundy);
  font-size:var(--f-xl); line-height:1.1; margin:34px 0 10px; letter-spacing:.01em;
}
section h2[data-pt]:first-of-type{margin-top:0}
.area-route+h2[data-pt]{margin-top:0}

.area-intro{max-width:62ch; margin:0 0 34px}
.area-intro p+p{margin-top:12px}
.area-sub{color:var(--soft); font-size:var(--f-sm); margin:0 0 18px; max-width:62ch}

/* cartoes das 10 cidades */
.area-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px; margin:0 0 40px;
}
.area-card{
  display:block; text-decoration:none; background:var(--white);
  border:1px solid var(--line); border-left:4px solid var(--burgundy);
  padding:14px 16px; transition:background .15s, border-color .15s;
}
.area-card:hover,.area-card:focus-visible{background:var(--cream-deep); border-left-color:var(--gold)}
.area-card b{
  display:block; font-family:var(--display); text-transform:uppercase;
  font-size:1.18rem; line-height:1.1; color:var(--burgundy);
}
.area-card span{display:block; margin-top:4px; font-size:var(--f-sm); color:var(--soft)}

/* bloco great wolf lodge */
.area-gwl{
  background:var(--wine); color:var(--cream);
  padding:26px var(--gut); margin:0 0 36px;
}
.area-gwl h2[data-pt]{color:var(--gold); margin:0 0 10px}
.area-gwl p{max-width:60ch}
.area-gwl .btn{margin-top:16px}
.area-gwl .btn-line{border-color:var(--gold); color:var(--cream)}
.area-gwl .btn-line:hover{background:var(--gold); color:var(--wine)}

/* as 113 cidades */
.area-bands{margin:0 0 40px}
.area-band{margin:0 0 26px}
.area-band h3[data-pt]{
  font-family:var(--display); text-transform:uppercase; color:var(--burgundy);
  font-size:1.05rem; letter-spacing:.06em; margin:0 0 10px;
  padding-bottom:6px; border-bottom:1px solid var(--line);
}
.area-band h3[data-pt] em{font-style:normal; color:var(--soft); font-weight:400}
.area-band ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:2px 14px;
}
.area-band li{font-size:var(--f-sm); color:var(--charcoal); padding:2px 0}
.area-band li a{color:var(--burgundy); font-weight:600; text-underline-offset:3px}

/* cidades vizinhas no rodape da pagina de cidade */
.area-near{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px}
.area-near a{
  text-decoration:none; border:1px solid var(--line); background:var(--white);
  padding:10px 14px; font-family:var(--display); text-transform:uppercase;
  font-weight:700; color:var(--burgundy); line-height:1.15;
}
.area-near a:hover,.area-near a:focus-visible{background:var(--cream-deep); border-color:var(--gold)}
.area-near a span{
  display:block; font-family:var(--body); text-transform:none; font-weight:400;
  font-size:var(--f-xs); color:var(--soft); margin-top:2px;
}

.area-fine{
  margin:30px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:var(--f-xs); color:var(--soft); line-height:1.5;
}

@media (max-width:620px){
  .area-cards{grid-template-columns:1fr}
  .area-band ul{grid-template-columns:1fr 1fr; gap:2px 10px}
  .area-band li{font-size:.82rem}
  .area-near{gap:8px}
  .area-near a{flex:1 1 100%}
}