.intro-echo tbody {
    display: block;
}


.intro-echo table {
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
}

.intro-echo td {
    border: 6px white solid;
    border-radius: 23px;
}

.intro-echo tbody {
    flex-direction: column;
}

.intro-echo td {
    display: flex;
    width: -webkit-fill-available;
    background: #dddddd !important;
    border-radius: 9px;
    border: 6px white solid;
    align-content: center;
    align-items: center;
}

.intro-echo tr {
    display: flex;
}

.content-servico img {
    width: 100%;
}

.acordion-servico {
    background: #e2e8e9;
    padding: 16px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.titulo-click {
    display: flex;
    justify-content: center;
    background: white;
    padding: 20px;
    align-items: center;
    border-radius: 20px;
    position: relative;
}

.titulo-click h4 {
    margin: 0px;
    font-size: 27px;
}

h4#sinalzinho {
    position: absolute;
    right: 4%;
    font-weight: 100 !important;
    color: #727272;
}

.content-servico {
    background: white;
    border-radius: 10px;
    overflow: hidden;


    max-height: 0;
    /* começa fechado */
    opacity: 0;
    /* invisível */
    transition: all 0.4s ease;
    /* animação suave */
}

.content-servico.ativo {
    max-height: 2500px;
    /* define um limite grande o suficiente */
    opacity: 1;
    padding: 10px;
    /* volta o padding quando abrir */
    margin-top: 20px;
    padding-top: 10px;
}

/* animação do sinalzinho */
.titulo-click h4#sinalzinho {
    transition: all 0.3s ease;
}

.titulo-click.ativo h4#sinalzinho {
    transform: rotate(45deg);
    /* gira o "+" em "x" */
    opacity: 0.5;
    /* dá aquela suavizada */
}

/* base do acordeão */
.content-servico {
    background: white;
    border-radius: 10px;
    overflow: hidden;

    padding: 0 16px;
    /* padding colapsado quando fechado */
    max-height: 0;
    opacity: 0;
    transition: max-height 350ms ease, opacity 300ms ease, padding 300ms ease;
}

/* classe "ativo" sinaliza estado aberto — a altura é controlada pelo JS */
.content-servico.ativo {
    opacity: 1;
    padding: 10px 16px;
    margin-top: 20px;
}

/* sinalzinho */
.titulo-click h4#sinalzinho {
    transition: transform 300ms ease, opacity 300ms ease;
}

.titulo-click.ativo h4#sinalzinho {
    transform: rotate(45deg);
    /* "+" vira "x" */
    opacity: 0.5;
}