/*
  HOME — Sobre nós (fundo em tom) + serviços em arco (index.php)
  Só variáveis do tema. Usa também .container, .stack, .sec, .band, .duas, .arco-img,
  .grid, .grid-3 (sobre.css / servicos.css) e .link-seta (servicos.css).
*/

/* Sobre nós: fundo com tom da cor primária */
#conteudo .sec--tint{
    background: var(--secondaryColor);
    background: color-mix(in srgb, var(--primaryColor) 16%, transparent);
}

/* Título da secção + ligação à direita */
#conteudo .cabecalho-sec{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
    margin-bottom: 40px;
}
#conteudo .cabecalho-texto{ gap: 12px; max-width: 640px; }

/* Serviços em arco */
#conteudo a.arco{
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--primaryTextColor);
    text-decoration: none;
    transition: transform .25s ease;
}
#conteudo a.arco h3{
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}
#conteudo .arco img{
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 999px 999px 0 0;
}
#conteudo a.arco:hover h3{ text-decoration-color: var(--terciaryColor); }
@media (hover: hover){
    #conteudo a.arco:hover{ transform: translateY(-4px); }
}

/* ---- Responsivo ---- */
@media (max-width: 991.98px){
    #conteudo .arco img{ height: 300px; }
}
@media (max-width: 640px){
    #conteudo .cabecalho-sec{ margin-bottom: 28px; }
    #conteudo .arco img{ height: 260px; }
}