/* Yujju design system — «Contacto» (M021, ContactLayout).
   Cabecera centrada (H1 + intro), dos columnas `yj-contact`: canales en tarjetas enlazadas
   y formulario CF7 dentro de `yj-card`; garantías en franja fina `yj-trust`.
   El tema/Elementor fijan fuente y márgenes por widget, por eso algunas reglas llevan !important. */

/* ── Cabecera ──────────────────────────────────────────────────────────────── */
.yj-ds .elementor[data-elementor-type="wp-page"] > .e-con.yj-contact__head {
    padding: var(--yj-section-y) var(--yj-space-4) var(--yj-space-7) !important;
    align-items: center;
    text-align: center;
    gap: var(--yj-space-3);
}
.yj-ds .elementor .yj-contact__head > .elementor-widget { width: 100%; max-width: 680px; margin: 0; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__head h1.elementor-heading-title {
    font-size: var(--yj-h1) !important;
    color: var(--yj-ink);
    text-align: center;
}
.yj-ds .elementor .yj-contact__head .yj-section__intro p {
    margin: 0;
    font-size: var(--yj-text-lg);
    color: var(--yj-text);
}

/* ── Dos columnas ──────────────────────────────────────────────────────────── */
.yj-ds .elementor[data-elementor-type="wp-page"] > .e-con.yj-contact {
    max-width: calc(1080px + 2 * var(--yj-space-4));
    margin: 0 auto;
    padding: 0 var(--yj-space-4) var(--yj-section-y) !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: var(--yj-space-7);
}
.yj-ds .elementor .yj-contact > .yj-contact__channels { flex: 1 1 0; min-width: 0; gap: var(--yj-space-4); padding: 0; }
.yj-ds .elementor .yj-contact > .yj-contact__form { flex: 1.15 1 0; min-width: 0; }
.yj-ds .elementor .yj-contact .elementor-widget { width: 100%; margin: 0; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__title .elementor-heading-title {
    font-size: var(--yj-h3) !important;
    color: var(--yj-ink);
}
.yj-ds .elementor .yj-contact__text p { margin: 0 0 var(--yj-space-3); color: var(--yj-text); }
.yj-ds .elementor .yj-contact__text p:last-child { margin-bottom: 0; }

/* Canales: tarjetas planas con icono a la izquierda, toda la tarjeta clicable */
.yj-ds .elementor .yj-contact__list { gap: var(--yj-space-3); padding: var(--yj-space-2) 0 0; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__channel .elementor-icon-box-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--yj-space-4);
    padding: var(--yj-space-4) var(--yj-space-5);
    text-align: left;
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
    transition: border-color var(--yj-transition);
}
.yj-ds .elementor .yj-contact__channel .elementor-icon-box-wrapper:hover,
.yj-ds .elementor .yj-contact__channel .elementor-icon-box-wrapper:focus-within { border-color: var(--yj-primary); }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__channel .elementor-icon-box-icon { margin: 0 !important; flex: 0 0 auto; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__channel .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 20px !important;
    color: var(--yj-primary-strong) !important;
    background: var(--yj-blush);
    border-radius: var(--yj-radius-pill);
}
.yj-ds .elementor .yj-contact__channel .elementor-icon svg { width: 20px; height: 20px; fill: currentColor; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__channel .elementor-icon-box-title {
    margin: 0 0 2px !important;
    font-family: var(--yj-font-body) !important;
    font-size: var(--yj-text-xs) !important;
    font-weight: 600 !important;
    letter-spacing: var(--yj-tracking-caps) !important;
    text-transform: uppercase !important;
    color: var(--yj-muted) !important;
}
/* El enlace del título cubre toda la tarjeta */
.yj-ds .elementor .yj-contact__channel .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; }
.yj-ds .elementor .yj-contact__channel .elementor-icon-box-title a { color: inherit !important; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__channel .elementor-icon-box-description {
    margin: 0 !important;
    font-size: var(--yj-text-md) !important;
    font-weight: 500;
    color: var(--yj-ink) !important;
    overflow-wrap: anywhere;
}

/* ── Formulario en tarjeta ─────────────────────────────────────────────────── */
.yj-ds .elementor[data-elementor-type="wp-page"] .e-con.yj-contact__form {
    padding: var(--yj-space-6) !important;
    gap: var(--yj-space-4);
    background: var(--yj-white);
    border: var(--yj-border) !important;
    border-radius: var(--yj-radius);
    box-shadow: none !important;
}
.yj-ds .yj-contact__form .wpcf7 form > p,
.yj-ds .yj-contact__form .wpcf7 .yujju-form > p { margin: 0 0 var(--yj-space-4); }
.yj-ds .yj-contact__form .wpcf7 label {
    display: block;
    margin-bottom: var(--yj-space-2);
    font-size: var(--yj-text-sm);
    font-weight: 500;
    color: var(--yj-ink);
}
.yj-ds .yj-contact__form .wpcf7 .wpcf7-form-control-wrap { display: block; }
/* CF7 deja un <br> tras cada etiqueta: separaba la etiqueta de su campo más que del campo anterior */
.yj-ds .yj-contact__form .wpcf7 label + br { display: none; }
.yj-ds .yj-contact__form .wpcf7 input[type="text"],
.yj-ds .yj-contact__form .wpcf7 input[type="email"],
.yj-ds .yj-contact__form .wpcf7 input[type="tel"],
.yj-ds .yj-contact__form .wpcf7 textarea {
    display: block;
    width: 100%;
    max-width: none;
}
.yj-ds .yj-contact__form .wpcf7 textarea { min-height: 140px; height: auto; resize: vertical; }
.yj-ds .yj-contact__form .wpcf7 input[type="submit"] { width: 100%; margin-top: var(--yj-space-2); }
.yj-ds .yj-contact__form .wpcf7 .wpcf7-not-valid-tip { margin-top: var(--yj-space-1); font-size: var(--yj-text-sm); color: var(--yj-danger); }
.yj-ds .yj-contact__form .wpcf7 .wpcf7-response-output {
    margin: var(--yj-space-4) 0 0;
    padding: var(--yj-space-3) var(--yj-space-4);
    border-radius: var(--yj-radius);
    font-size: var(--yj-text-sm);
}
.yj-ds .elementor .yj-contact__note p { margin: 0; font-size: var(--yj-text-sm); color: var(--yj-muted); text-align: center; }

/* ── Franja de confianza ───────────────────────────────────────────────────── */
.yj-ds .elementor[data-elementor-type="wp-page"] > .e-con.yj-contact__trust {
    padding: var(--yj-space-6) var(--yj-space-4) !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--yj-space-4) var(--yj-space-8);
    background: var(--yj-blush);
    border-top: var(--yj-border);
    border-bottom: var(--yj-border);
}
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-contact__trust > .elementor-widget { width: auto !important; margin: 0 !important; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-trust__item > .elementor-widget-container,
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-trust__item .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--yj-space-3);
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left;
}
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-trust__item .elementor-icon-box-icon { margin: 0 !important; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-trust__item .elementor-icon {
    width: 28px;
    height: 28px;
    font-size: 28px !important;
    background: none !important;
}
.yj-ds .elementor .yj-trust__item .elementor-icon svg { width: 28px; height: 28px; }
.yj-ds .elementor[data-elementor-type="wp-page"] .yj-trust__item .elementor-icon-box-title {
    margin: 0 !important;
    font-family: var(--yj-font-body) !important;
    font-size: var(--yj-text-sm) !important;
    font-weight: 600 !important;
    color: var(--yj-ink) !important;
}
.yj-ds .elementor .yj-trust__item .elementor-icon-box-description { display: none; }

@media (max-width: 991px) {
    .yj-ds .elementor[data-elementor-type="wp-page"] > .e-con.yj-contact { flex-direction: column !important; align-items: stretch; gap: var(--yj-space-6); }
    .yj-ds .elementor .yj-contact > .e-con { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 767px) {
    .yj-ds .elementor[data-elementor-type="wp-page"] .e-con.yj-contact__form { padding: var(--yj-space-5) !important; }
    .yj-ds .elementor[data-elementor-type="wp-page"] > .e-con.yj-contact__trust { flex-direction: column !important; align-items: flex-start; padding-left: var(--yj-space-6) !important; }
}