/* Home — as seções de entrada: as duas fileiras de blocos e os rastreios
   gerais. O cabeçalho, o hero (com a busca e as ferramentas), os cognitivos
   e o Aprenda continuam vindo de css/style.css e do próprio index.html. Só a
   home carrega este arquivo. */

.doors-section { padding: 56px 0; background: #f6f2ea; }

.start-title {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: #1a4d2e;
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
}
.start-sub {
    color: #5b6b63;
    font-size: 1rem;
    margin: 0 0 2.2rem;
    max-width: 66ch;
}

/* ---- para quem: cada bloco é um teste, dito na frase da pessoa ---- */
.mosaic { display: flex; flex-direction: column; gap: 38px; }
.mcol__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border-bottom: 2px solid #1a4d2e; padding-bottom: .5rem; margin-bottom: 14px; flex-wrap: wrap;
}
.mcol__k {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.6rem; font-weight: 700; color: #1a4d2e; margin: 0; line-height: 1.1;
}
.mcol__all { font-size: .88rem; color: #2f6a4d; text-decoration: none; font-weight: 500; white-space: nowrap; }
.mcol__all:hover, .mcol__all:focus-visible { text-decoration: underline; }

.mcol__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.mtile {
    display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
    min-height: 210px; padding: 22px 22px 18px;
    border-radius: 12px; color: #fff; text-decoration: none;
    transition: filter .18s, transform .18s;
}
.mtile:hover, .mtile:focus-visible { filter: brightness(1.12); transform: translateY(-2px); color: #fff; }
.mtile__body { display: flex; flex-direction: column; gap: 8px; }
.mtile__q {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 700; font-size: 1.6rem; line-height: 1.08; letter-spacing: -.01em;
}
.mtile__d { font-size: .84rem; line-height: 1.45; color: rgba(255,255,255,.82); }
.mtile__f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mtile__m { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); white-space: nowrap; }
.mtile__go { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; white-space: nowrap; }

/* ---- os três gerais, para quem não sabe por onde começar ---- */
.mstart { display: flex; flex-direction: column; gap: 12px; }
.mstart__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mstart__k { margin: 0; font-size: 1.05rem; font-weight: 600; color: #2b2b2b; }
.mstart__s { font-size: .84rem; color: #5b6b63; }
.mstart__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mstart__card {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    padding: 16px 18px; background: #fff; border: 1px solid #e8e3db; border-radius: 12px;
}
.mstart__card:hover, .mstart__card:focus-visible { border-color: #2d6a4f; }
.mstart__q {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.25rem; font-weight: 700; color: #1a4d2e; line-height: 1.15;
}
.mstart__m { font-size: .82rem; color: #5a5a5a; }
.mstart > .mcol__all { align-self: flex-start; margin-top: 2px; }

@media (max-width: 860px) {
    .mcol__grid, .mstart__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mcol__head { align-items: flex-start; }
    .doors-section { padding: 40px 0; }
    .mosaic { gap: 30px; }
}
@media (max-width: 520px) {
    .mcol__grid, .mstart__grid { grid-template-columns: 1fr; }
    .mtile { min-height: 0; }
}