/* Home — as seções de entrada: os dois mosaicos e os rastreios gerais.
   O cabeçalho, o hero (com a busca e as ferramentas), os cognitivos, a
   equipe 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, 2rem);
    font-weight: 700;
    color: #1a4d2e;
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
}
.start-sub {
    color: #5b6b63;
    font-size: .95rem;
    margin: 0 0 1.5rem;
    max-width: 62ch;
}

/* ---- 1 · queixas ---- */

/* ---- 2 · para quem: dois mosaicos de blocos que viram ---- */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mosaic--side { grid-template-columns: 1fr 1fr 300px; }
.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.5rem; font-weight: 700; color: #1a4d2e; margin: 0; line-height: 1.1;
}
.mcol__all { font-size: .87rem; 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(2, 1fr); gap: 12px; }

.mtile {
    position: relative;
    aspect-ratio: 1.25 / 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 8px; text-align: center; text-decoration: none; color: #fff;
    border-radius: 12px; overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .42s cubic-bezier(.4,0,.2,1), filter .18s;
}
.mtile:hover, .mtile:focus-visible { filter: brightness(1.14); z-index: 2; }
.mtile.is-turning { transform: rotateY(90deg); }

.mtile__l {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.05;
    letter-spacing: -.01em; word-break: break-word;
}
.mtile__t {
    font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
    opacity: .78; margin-top: .35rem; line-height: 1.15;
}
.mosaic-empty { grid-column: 1 / -1; font-size: .9rem; color: #8a9a92; }

@media (prefers-reduced-motion: reduce) {
    .mtile { transition: none; }
    .mtile.is-turning { transform: none; }
}

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