/* Casa Cabello — Página de contacto */

.contact-index-index .page-title-wrapper,
.contact-index-index .contact-form-wrapper .page-title-wrapper {
    visibility: visible !important;
}

.contact-index-index .jumbotron.jumbotron-pastel {
    background: linear-gradient(135deg, #0f224c 0%, #466fad 100%);
    padding: 56px 20px 64px;
    margin: 0;
}

.contact-index-index .jumbotron.jumbotron-pastel > .container {
    max-width: none;
    padding: 0;
}

.contact-index-index .contact-bg.hidden-xs {
    display: none !important;
}

.contact-index-index .contact-form-wrapper {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 32px 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(15, 34, 76, 0.12);
}

.contact-index-index .page-title {
    margin: 0 0 12px !important;
    padding-top: 0 !important;
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #0f224c !important;
    text-align: center !important;
}

.contact-index-index .form.contact {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.contact-index-index .form.contact .legend {
    display: none;
}

.contact-index-index .field.note.no-label {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: #64748b;
    text-align: center;
    line-height: 1.5;
}

.contact-index-index .field.note.no-label::after {
    margin: 20px auto 0;
    background-color: #466fad;
}

.contact-index-index .form.contact .fieldset > .field {
    margin-bottom: 1.15rem;
}

.contact-index-index .form.contact .fieldset > .field > .label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #0f224c;
}

.contact-index-index .form.contact .input-text,
.contact-index-index .form.contact textarea {
    width: 100%;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 0.9375rem;
    background: #fff;
}

.contact-index-index .form.contact textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-index-index .form.contact .input-text::placeholder,
.contact-index-index .form.contact textarea::placeholder {
    color: #94a3b8;
}

.contact-index-index .form.contact .input-text:focus,
.contact-index-index .form.contact textarea:focus {
    border-color: #466fad;
    box-shadow: 0 0 0 3px rgba(70, 111, 173, 0.15);
}

.contact-index-index .actions-toolbar {
    margin-top: 1.25rem;
    text-align: center;
}

.contact-index-index .actions-toolbar .action.primary {
    min-width: 180px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #0f224c;
    border-color: #0f224c;
    color: #fff !important;
    font-weight: 700;
}

.contact-index-index .actions-toolbar .action.primary:hover,
.contact-index-index .actions-toolbar .action.primary:focus {
    background: #466fad;
    border-color: #466fad;
    color: #fff !important;
}

/* Tarjetas de contacto (email, dirección, teléfono) */
.contact-index-index .contact-info {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 36px auto 48px;
    padding: 0 20px;
    text-align: left;
}

.contact-index-index .contact-info .divider {
    display: none !important;
}

.contact-index-index .contact-info > div:not(.divider) {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 18px;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    background: #fff;
}

.contact-index-index .contact-info .icon {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
}

.contact-index-index .contact-info .icon svg {
    display: block;
    width: 26px !important;
    height: auto !important;
    max-height: 28px;
}

.contact-index-index .contact-info .content {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.contact-index-index .contact-info strong {
    display: block;
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f224c;
    line-height: 1.3;
}

.contact-index-index .contact-info .content > div {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #475569;
}

.contact-index-index .contact-info .content a {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #466fad;
    text-decoration: none;
}

.contact-index-index .contact-info .content a:hover {
    color: #0f224c;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .contact-index-index .jumbotron.jumbotron-pastel {
        padding: 32px 12px 40px;
    }

    .contact-index-index .contact-form-wrapper {
        margin: 0;
        padding: 28px 18px 32px;
    }

    .contact-index-index .contact-info {
        grid-template-columns: 1fr;
    }

    .contact-index-index .contact-info > div:not(.divider) {
        padding: 18px 16px;
    }
}