.page-contacto-hero {
    padding: 168px 0 60px;
    background: linear-gradient(180deg, var(--color-yellow) 0%, var(--color-sky) 100%);
    text-align: center;
}

.page-contacto-hero .page-hero-title {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    font-size: clamp(34px, 4.6vw, 52px);
    color: var(--color-text-dark);
    max-width: 720px;
    margin: 0 auto 16px;
}

.page-contacto-hero .page-hero-subtitle {
    font-family: var(--font-subheading);
    font-size: clamp(19px, 2.2vw, 24px);
    color: var(--color-text-dark);
    max-width: 560px;
    margin: 0 auto;
}

.contacto-body {
    background: var(--color-white);
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
}

/* ==== COLUMNA IZQUIERDA: canales, horarios, envíos ==== */
.contacto-channels {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.contacto-block h3 {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 15px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-text-dark);
    margin: 0 0 14px;
}

.contacto-block p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: rgba(43, 43, 43, .75);
    margin: 0 0 8px;
}

.contacto-channel-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}

.contacto-channel-btns .btn {
    padding: 13px 26px;
    font-size: 13.5px;
}

/* ==== COLUMNA DERECHA: formulario ==== */
.contacto-form {
    background: color-mix(in oklch, var(--color-sky) 16%, white);
    border-radius: 24px;
    padding: 44px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacto-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contacto-form-field label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark);
}

.contacto-form-field input,
.contacto-form-field select,
.contacto-form-field textarea {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--color-text-dark);
    background: var(--color-white);
    border: 1px solid rgba(43, 43, 43, .15);
    border-radius: 10px;
    padding: 13px 16px;
}

.contacto-form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.contacto-form-field input:focus,
.contacto-form-field select:focus,
.contacto-form-field textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.contacto-form .btn-primary {
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

.contacto-form-note {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: rgba(43, 43, 43, .5);
    margin: 0;
}

/* ==== ENLACE A FAQ ==== */
.contacto-faq-link {
    background: color-mix(in oklch, var(--color-pink-light) 25%, white);
    text-align: center;
    padding: 56px 0;
}

.contacto-faq-link p {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-dark);
    margin: 0 0 18px;
}

@media (max-width: 900px) {
    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .contacto-form {
        padding: 32px 24px;
    }
}