/* ==========================================================================
   Fecho da página de válvula — atendimento técnico + outras válvulas
   ========================================================================== */

.vmore {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(var(--co-accent-rgb), 0.10), transparent 70%),
        var(--co-deep);
}

.vmore__grid {
    display: grid;
    gap: var(--space-12);
}

.vmore__contact {
    display: grid;
    align-content: start;
    gap: var(--space-5);
}

.vmore__contact .display-title__line:nth-child(1) { --reveal-delay: 80ms; }
.vmore__contact .display-title__line:nth-child(2) { --reveal-delay: 160ms; }

.vmore__text {
    max-width: 30rem;
    color: var(--text-2);
    --reveal-delay: 240ms;
}

.vmore__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
    --reveal-delay: 320ms;
}

.vmore__mail {
    font-size: var(--fs-sm);
    color: var(--text-3);
    --reveal-delay: 400ms;
}

.vmore__mail a {
    color: var(--text-2);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.vmore__mail a:hover {
    color: var(--text);
}

/* --- Outras válvulas ---------------------------------------------------------------- */
.vmore__label {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-3);
}

.vmore__list {
    border-top: 1px solid var(--line);
}

.vmore__list li {
    border-bottom: 1px solid var(--line);
}

.vmore__list li:nth-child(2) { --reveal-delay: 60ms; }
.vmore__list li:nth-child(3) { --reveal-delay: 120ms; }
.vmore__list li:nth-child(4) { --reveal-delay: 180ms; }
.vmore__list li:nth-child(5) { --reveal-delay: 240ms; }

.vlink {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
        "media name arrow"
        "media fn   arrow";
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-3) 0;
}

.vlink__media {
    grid-area: media;
    width: 52px;
    height: 52px;
    overflow: hidden;
    background: var(--photo-bg);
    border-radius: var(--radius-sm);
}

.vlink__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out-expo);
}

.vlink__name {
    grid-area: name;
    align-self: end;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-snug);
    line-height: 1.15;
}

.vlink__fn {
    grid-area: fn;
    align-self: start;
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.vlink__arrow {
    grid-area: arrow;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 1rem;
    color: var(--text-2);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    transition:
        transform var(--dur-slow) var(--ease-out-expo),
        background-color var(--dur-base) var(--ease-apple),
        color var(--dur-base) var(--ease-apple),
        border-color var(--dur-base) var(--ease-apple);
}

@media (hover: hover) {
    .vlink:hover .vlink__arrow {
        color: #fff;
        background: var(--co-accent);
        border-color: var(--co-accent);
        transform: rotate(45deg);
    }

    .vlink:hover .vlink__media img {
        transform: scale(1.08);
    }
}

@media (max-width: 767.98px) {
    .vmore__actions .btn {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .vmore__actions .btn--ghost {
        justify-content: center;
    }
}

@media (min-width: 1024px) {
    .vmore__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
        align-items: start;
        gap: clamp(var(--space-12), 8vw, 9rem);
    }
}