#contact.contact-section {
    box-sizing: border-box;
    max-inline-size: none;
    inline-size: 100%;
    margin: 0 0 -60px;
    padding: 3.25rem 1.25rem 7rem;
    background: #f5f2ef;
    color: #1f2937;
    border-radius: 0;
    overflow: visible;
    scroll-margin-block-start: 6.5rem;
}

.contact-section *,
.contact-section *::before,
.contact-section *::after,
.contact-launcher,
.contact-launcher *,
.contact-launcher *::before,
.contact-launcher *::after {
    box-sizing: border-box;
}

#contact .contact-section__card {
    max-inline-size: 820px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid rgba(138, 10, 30, 0.14);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(76, 48, 53, 0.16);
}

#contact .contact-section__header {
    padding: 1.35rem 1.5rem 1.2rem;
    background: #8A0A1E;
    color: #fff;
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
}

.contact-section__heading {
    margin: 0;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
}

.contact-section__intro {
    margin: 0.45rem 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.55;
}

.contact-section__hint,
.contact-section__retry {
    margin-block: 0.35rem 0;
    color: #6b7280;
}

.contact-section__form {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1.35rem 1.5rem 1.5rem;
    background: #fff;
    border-end-start-radius: 16px;
    border-end-end-radius: 16px;
}

.contact-section__names {
    display: grid;
    gap: 1rem;
}

.contact-section__field {
    display: grid;
    gap: 0.4rem;
}

.contact-section__field label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #374151;
    font-size: 0.92rem;
    font-weight: 600;
}

.contact-section__glyph {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: 0 0 auto;
    color: #8A0A1E;
}

.contact-section__optional {
    color: #6b7280;
    font-weight: 500;
}

.contact-section__required {
    color: #c1122f;
    font-size: 1.05em;
    font-weight: 800;
    line-height: 1;
}

#contact.contact-section input,
#contact.contact-section select,
#contact.contact-section textarea {
    inline-size: 100%;
    min-block-size: 48px;
    padding-inline: 0.85rem;
    padding-block: 0.65rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
    font: inherit;
}

#contact.contact-section textarea {
    min-block-size: 9.5rem;
    resize: vertical;
}

.contact-section__submit {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-block-size: 48px;
    margin-block-start: 0.25rem;
    padding-inline: 1.35rem;
    border: 0;
    border-radius: 10px;
    background: #8A0A1E;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contact-section__submit::before {
    content: "";
    inline-size: 1.05rem;
    block-size: 1.05rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.4 20.4 21 12 3.4 3.6l2.3 7.1L15.2 12l-9.5 1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.4 20.4 21 12 3.4 3.6l2.3 7.1L15.2 12l-9.5 1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-section__error {
    margin: 0;
    color: #6d1020;
    font-weight: 650;
}

.contact-section__result {
    margin-block-start: 0.5rem;
    padding-inline: 0.9rem;
    padding-block: 0.8rem;
    border: 1px dashed #6d1020;
    border-inline-start: 4px dashed #6d1020;
    border-radius: 8px;
    background: #fff4f4;
    color: #4a0c16;
}

.contact-section__result[hidden] {
    display: none;
}

.contact-section__result--saved {
    border-style: solid;
    border-color: #0b4f2a;
    border-inline-start-style: solid;
    background: #e7f6ee;
    color: #06351c;
}

.contact-section__hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#contact.contact-section :focus-visible {
    outline: 3px solid #8A0A1E;
    outline-offset: 2px;
}

.contact-launcher__toggle:focus-visible,
.contact-launcher__action:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 3px;
}

.contact-launcher {
    position: fixed;
    z-index: 80;
    right: 1rem;
    inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
    inline-size: 3.75rem;
}

.contact-launcher__toggle {
    display: grid;
    place-items: center;
    inline-size: 3.75rem;
    block-size: 3.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #8b000f;
    color: #fff;
    box-shadow: 0 8px 24px rgba(72, 0, 10, 0.3);
    cursor: pointer;
    list-style: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.contact-launcher__toggle::-webkit-details-marker,
.contact-launcher__toggle::marker {
    display: none;
    content: "";
}

.contact-launcher__menu {
    position: absolute;
    right: 0;
    inset-block-end: calc(100% + 0.65rem);
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    inline-size: 3.75rem;
    animation: contact-launcher-reveal 160ms ease-out both;
}

.contact-launcher__action {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 8px 22px rgba(38, 16, 20, 0.24);
    text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.contact-launcher__action--whatsapp {
    background: #128c4a;
}

.contact-launcher__action--form {
    background: #8b000f;
}

.contact-launcher__icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: 0 0 auto;
}

.contact-launcher__icon--main {
    inline-size: 1.85rem;
    block-size: 1.85rem;
    transform: translate(0.08rem, -0.04rem);
}

.contact-launcher[open] .contact-launcher__toggle {
    background: #6d0019;
    box-shadow: 0 6px 18px rgba(72, 0, 10, 0.36);
}

@keyframes contact-launcher-reveal {
    from {
        opacity: 0;
        transform: translateY(0.45rem) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (hover: hover) {
    .contact-launcher__toggle:hover {
        background: #6d0019;
        box-shadow: 0 10px 28px rgba(72, 0, 10, 0.38);
        transform: translateY(-2px);
    }

    .contact-launcher__action--whatsapp:hover {
        background: #0d713a;
        transform: translateY(-2px);
    }

    .contact-launcher__action--form:hover {
        background: #6d0019;
        transform: translateY(-2px);
    }

    #contact .contact-section__submit:hover {
        background: #6D0019;
    }
}

@media (min-width: 640px) {
    .contact-section__names {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    #contact.contact-section {
        padding: 2.25rem 0.75rem 6.25rem;
    }

    #contact .contact-section__header,
    #contact .contact-section__form {
        padding-inline: 1rem;
    }

    .contact-launcher {
        right: 0.75rem;
        inset-block-end: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-section,
    .contact-section *,
    .contact-launcher,
    .contact-launcher * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}