/* Pagina de escolha. So o que ela acrescenta ao estilo.css da casa. */
.hero-ir{padding:4.5rem 0 2rem}
.hero-ir h1{font-size:clamp(2.6rem,7vw,4.2rem);margin:.6rem 0 .8rem}
.hero-ir .sub{font-size:1.12rem;max-width:34rem;color:var(--cinza)}

/* AS TRES PORTAS. Grade de tres colunas no desktop e empilhada no telefone, que e onde quase
   todo mundo chega -- o link vem da bio do Instagram. */
.portas{display:grid;gap:1rem;margin:0 auto 3.5rem}
@media(min-width:820px){.portas{grid-template-columns:repeat(3,1fr)}}
.porta{display:grid;gap:.4rem;padding:1.6rem 1.5rem;background:var(--papel);text-decoration:none;
       border:1px solid var(--linha);border-left:3px solid var(--linha);
       transition:background .15s,border-color .15s}
.porta:hover,.porta:focus-visible{background:#fff;border-left-color:var(--selo)}
.porta .rot{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
            color:var(--cinza)}
.porta strong{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--tinta)}
.porta .ex{font-size:.9rem;color:var(--cinza)}

.alvo{scroll-margin-top:1rem}
.ofertas{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.ofertas{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}}
.oferta{background:var(--papel);border:1px solid var(--linha);padding:1.5rem 1.6rem;
        display:flex;flex-direction:column;gap:.55rem}

.oferta:hover{border-color:var(--selo)}
.oferta h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin:0;color:var(--tinta)}
/* o `auto` embaixo da descricao empurra preco, nota e botao para o pe do cartao: com textos
   de tamanhos diferentes, os botoes de uma mesma fileira caem todos na mesma linha */
.oferta .desc{font-size:.96rem;color:var(--cinza);margin:0 0 auto}
.preco-ir{font-family:var(--mono);font-size:1.05rem;color:var(--tinta);margin:.3rem 0 0;
          font-variant-numeric:tabular-nums}
.nota-ir{font-size:.86rem;color:var(--cinza);margin:0}
.oferta .acao{margin:.5rem 0 0}

.lista-mais{list-style:none;padding:0;display:grid;gap:.6rem;max-width:42rem}
.lista-mais li{padding-left:1.1rem;position:relative}
.lista-mais li::before{content:"·";position:absolute;left:0;color:var(--selo);font-weight:700}