/* AJUSTE #15: quatro cards; Rates ocupa duas linhas e Comércio ocupa a base direita; editado em 09/10/2026 13:28 GMT-3, autorizado por Mateus. */
#servidor .l2-container{max-width:1440px}
#servidor .pilares{grid-template-columns:minmax(0,1.1fr) repeat(2,minmax(0,1fr));grid-template-areas:"rates qualidade classes" "rates comercio comercio";gap:20px}
#servidor .pilar{position:relative;min-width:0;min-height:0;padding:0;display:flex;flex-direction:column;grid-column:auto;grid-row:auto;align-items:stretch;background:#100f0d;border-color:#51422c}
#servidor .pilar--qualidade{grid-area:qualidade}
#servidor .pilar--rates{grid-area:rates}
#servidor .pilar--classes{grid-area:classes}
#servidor .pilar--comercio{grid-area:comercio}
#servidor .pilar::after{display:none}
#servidor .pilar__media{position:absolute;inset:0 0 auto;display:block;aspect-ratio:10/9;z-index:0;overflow:hidden}
#servidor .pilar__media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:filter .3s}
#servidor .pilar__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 36%,rgba(16,15,13,.3) 46%,rgba(16,15,13,.93) 66%,#100f0d 85%)}
#servidor .pilar__respiro{padding-top:48%;flex-shrink:0}
#servidor .pilar .pilar__conteudo{position:relative;z-index:1;max-width:none;padding:38px 24px 28px;margin-top:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex:1}
#servidor .pilar__medalhao{position:absolute;top:-30px;left:24px;width:56px;height:56px;filter:drop-shadow(0 4px 10px #0009)}
#servidor .pilar .l2-feature__title{display:block;min-height:0;font-size:clamp(21px,1.65vw,25px);line-height:1.2;margin:0;color:#f0d98a;text-wrap:balance}
#servidor .pilar .l2-feature__text{min-height:0;color:#ded6c8;font-size:16px;line-height:1.55;margin:0}
#servidor .pilar .l2-feature__text p{margin:0}
#servidor .pilar__botao{margin-top:4px;min-height:44px}
#servidor .pilar--rates .pilar__media{aspect-ratio:5/8}
#servidor .pilar--rates .pilar__media::after{background:linear-gradient(180deg,transparent 52%,rgba(16,15,13,.2) 64%,#100f0d 98%)}
#servidor .pilar--rates .pilar__respiro{padding-top:110%;flex:1}
#servidor .pilar--rates .pilar__conteudo{flex:0;padding:44px 32px 40px}
#servidor .pilar--rates .pilar__medalhao{left:32px}
#servidor .pilar--rates .l2-feature__title{font-size:clamp(29px,2.65vw,38px)}
#servidor .pilar--rates .l2-feature__text{font-size:17px;line-height:1.6}
#servidor .pilar:focus-within{border-color:#e5bc70}
@media(hover:hover) and (pointer:fine){#servidor .pilar:hover{border-color:#e5bc70}#servidor .pilar:hover .pilar__media img{filter:brightness(1.08)}}
/* AJUSTE #15: mesma arte do Comércio em faixa larga, com mercador à esquerda e texto ao lado. */
@media(min-width:768px){
 #servidor .pilar--comercio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:260px}
 #servidor .pilar--comercio .pilar__media{position:relative;inset:auto;aspect-ratio:auto;min-height:260px}
 #servidor .pilar--comercio .pilar__media img{position:absolute;inset:0;object-position:left top}
 #servidor .pilar--comercio .pilar__media::after{background:linear-gradient(90deg,transparent 70%,#100f0d)}
 #servidor .pilar--comercio .pilar__respiro{display:none}
 #servidor .pilar--comercio .pilar__conteudo{padding:24px 28px;gap:12px;justify-content:center}
 #servidor .pilar--comercio .pilar__medalhao{position:static;width:48px;height:48px}
}
/* AJUSTE #15: Rates horizontal no topo do tablet; dois cards e Comércio largo abaixo. */
@media(min-width:768px) and (max-width:1099px){
 #servidor .pilares{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"rates rates" "qualidade classes" "comercio comercio"}
 #servidor .pilar--rates .pilar__media{aspect-ratio:2/1}
 #servidor .pilar--rates .pilar__media::after{background:linear-gradient(180deg,transparent 28%,#100f0d50 48%,#100f0de8 72%,#100f0d 98%)}
 #servidor .pilar--rates .pilar__respiro{padding-top:30%;flex:0}
 #servidor .pilar--rates .pilar__conteudo{width:100%;padding:38px 28px 32px}
 #servidor .pilar--rates .pilar__medalhao{left:28px}
 #servidor .pilar--rates .l2-feature__title{font-size:29px}
 #servidor .pilar--rates .l2-feature__text{font-size:17px;line-height:1.55}
}
/* AJUSTE #15: arte de 170px nos cards menores e 220px em Rates; texto logo abaixo, sem respiro nem degradê. */
@media(max-width:767px){
 #servidor .pilares{grid-template-columns:minmax(0,1fr);grid-template-areas:"rates" "qualidade" "classes" "comercio";gap:16px}
 #servidor .pilar__media{position:relative;inset:auto;aspect-ratio:auto;height:170px;flex:none}
 #servidor .pilar__media::after{display:none}
 #servidor .pilar__respiro{display:none}
 #servidor .pilar .pilar__conteudo{padding:30px 20px 22px;gap:12px}
 #servidor .pilar__medalhao{top:-24px;left:20px;width:48px;height:48px}
 #servidor .pilar--rates .pilar__media{aspect-ratio:auto;height:220px}
 #servidor .pilar--rates .pilar__medalhao{left:20px}
 #servidor .pilar--rates .l2-feature__text{font-size:16px;line-height:1.55}
 #servidor .pilar .l2-feature__title{font-size:24px}
}
@media(prefers-reduced-motion:reduce){#servidor .pilar__media img{transition:none}}

/* AJUSTE #7: remover o limite herdado de 34ch; todo o espaço interno serve ao texto. */
#servidor .pilar .l2-feature__title,
#servidor .pilar .l2-feature__text,
#servidor .pilar .l2-feature__text p{width:100%;max-width:none;min-width:0}
#servidor .pilar--rates .l2-feature__title,
#servidor .pilar--rates .l2-feature__text p{max-width:60ch}