/* ============================================================
   SISTEMA GLOBAL DE DETALHES — GLASS CLOUD
============================================================ */

/* Estado base */
.detalhes {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition:
        max-height 0.45s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
    padding: 12px 10px; /* ligeiramente mais compacto */
    margin-top: 4px !important; /* espaçamento compacto real */
}

/* Estado aberto */
.detalhes.open {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
}

/* Headings internos */
.detalhes h3,
.detalhes h4 {
    margin-top: 10px;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Listas internas */
.detalhes ul {
    margin-left: 18px;
    margin-bottom: 10px;
}

.detalhes ul li {
    margin-bottom: 6px;
}

/* Botão universal */
.detalhes-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(102,204,255,0.25);
    border: 1px solid rgba(102,204,255,0.45);
    color: #e8f8ff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    backdrop-filter: blur(8px);

    margin-top: 12px;  /* espaço entre descrição e botão */
    margin-bottom: 4px; /* espaço compacto antes dos detalhes */
}

.detalhes-btn:hover {
    background: rgba(102,204,255,0.45);
    border-color: #66ccff;
    box-shadow:
        0 0 18px rgba(102,204,255,0.55),
        inset 0 0 12px rgba(102,204,255,0.35);
    transform: translateY(-3px);
}