/* ═══════════════════════════════════════════════════════════════════
   SAC Fly · CONTACTO (formulario + redes sociales)
   ═══════════════════════════════════════════════════════════════════ */

.comp-contacto__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 60px);
}

.comp-contacto--bg-white { background: var(--color-white); }
.comp-contacto--bg-alt   { background: var(--color-bg-alt); }
.comp-contacto--bg-dark  { background: var(--comp-gradient-dark); color: var(--color-white); }

/* ── Encabezado centrado ────────────────────────────────── */
.comp-contacto__header {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
}

.comp-contacto__title {
    margin-bottom: var(--space-3);
    letter-spacing: -.035em;
}

.comp-contacto--bg-dark .comp-contacto__title { color: var(--color-white); }

.comp-contacto__subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.7;
}

.comp-contacto--bg-dark .comp-contacto__subtitle { color: rgba(255, 255, 255, .78); }

/* ── Grilla 2 columnas ──────────────────────────────────── */
.comp-contacto__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

@media (min-width: 860px) {
    .comp-contacto__grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* ── Formulario (shortcode wpforms) ─────────────────────── */
.comp-contacto__form {
    min-width: 0;
}

/* ── Redes ──────────────────────────────────────────────── */
.comp-contacto__redes-title {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-brand-secondary, #405481);
    display: inline-block;
    font-size: var(--font-size-lg);
    color: var(--color-brand-primary);
}

.comp-contacto--bg-dark .comp-contacto__redes-title {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, .5);
}

.comp-contacto__redes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.comp-contacto__red-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-brand-primary);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.comp-contacto--bg-dark .comp-contacto__red-link { color: rgba(255, 255, 255, .9); }

.comp-contacto__red-link:hover {
    color: var(--color-brand-secondary, #405481);
    transform: translateX(3px);
}

.comp-contacto--bg-dark .comp-contacto__red-link:hover { color: #fff; }

.comp-contacto__red-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: rgba(64, 84, 129, .1);
    color: var(--color-brand-secondary, #405481);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.comp-contacto--bg-dark .comp-contacto__red-icon {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.comp-contacto__red-link:hover .comp-contacto__red-icon {
    background: var(--color-brand-secondary, #405481);
    color: #fff;
}

.comp-contacto__red-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.comp-contacto__red-text {
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   ESTILO MODERNO DEL FORMULARIO WPFORMS (dentro de Contacto)
   ═══════════════════════════════════════════════════════════════════ */

.comp-contacto .wpforms-container {
    margin: 0;
}

/* Espaciado uniforme entre campos */
.comp-contacto .wpforms-field {
    padding: 0 0 var(--space-4);
}

/* Inputs y textarea */
.comp-contacto .wpforms-field input[type="text"],
.comp-contacto .wpforms-field input[type="email"],
.comp-contacto .wpforms-field input[type="tel"],
.comp-contacto .wpforms-field input[type="url"],
.comp-contacto .wpforms-field input[type="number"],
.comp-contacto .wpforms-field textarea,
.comp-contacto .wpforms-field select {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--comp-card-border, #e2e8f0);
    border-radius: 12px;
    background: var(--color-white, #fff);
    color: var(--color-text, #1e293b);
    font-size: 16px;
    line-height: 1.4;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

.comp-contacto .wpforms-field textarea {
    min-height: 130px;
    resize: vertical;
}

/* Placeholder */
.comp-contacto .wpforms-field input::placeholder,
.comp-contacto .wpforms-field textarea::placeholder {
    color: var(--color-text-muted, #94a3b8);
    opacity: 1;
}

/* Foco */
.comp-contacto .wpforms-field input:focus,
.comp-contacto .wpforms-field textarea:focus,
.comp-contacto .wpforms-field select:focus {
    outline: none;
    border-color: var(--color-brand-secondary, #405481);
    box-shadow: 0 0 0 4px rgba(64, 84, 129, .12);
    background: #fff;
}

/* Labels (por si activan las etiquetas visibles) */
.comp-contacto .wpforms-field-label {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-brand-primary, #405481);
}

.comp-contacto .wpforms-required-label {
    color: #e11d48;
}

/* Fila Nombre + Apellido: un poco de aire entre columnas */
.comp-contacto .wpforms-field-row .wpforms-first {
    padding-right: 8px;
}
.comp-contacto .wpforms-field-row .wpforms-one-half:not(.wpforms-first) {
    padding-left: 8px;
}

/* Mensajes de error */
.comp-contacto .wpforms-error {
    border-color: #e11d48 !important;
    box-shadow: 0 0 0 4px rgba(225, 29, 72, .1) !important;
}

.comp-contacto .wpforms-error-message,
.comp-contacto label.wpforms-error {
    margin-top: 6px;
    color: #e11d48;
    font-size: 13px;
    font-weight: 500;
}

/* Botón de envío */
.comp-contacto .wpforms-submit-container {
    margin-top: var(--space-2);
}

.comp-contacto button.wpforms-submit,
.comp-contacto .wpforms-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 34px;
    border: none;
    border-radius: 12px;
    background: var(--color-brand-secondary, #405481);
    color: #fff;
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    box-shadow: 0 8px 22px rgba(64, 84, 129, .22);
}

.comp-contacto button.wpforms-submit:hover,
.comp-contacto .wpforms-submit:hover {
    background: var(--color-brand-primary, #33415f);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(64, 84, 129, .3);
}

.comp-contacto button.wpforms-submit:active,
.comp-contacto .wpforms-submit:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(64, 84, 129, .22);
}

/* Captcha con aire arriba */
.comp-contacto .wpforms-recaptcha-container,
.comp-contacto .h-captcha {
    margin-bottom: var(--space-4);
}

/* En fondo oscuro del componente */
.comp-contacto--bg-dark .wpforms-field input,
.comp-contacto--bg-dark .wpforms-field textarea,
.comp-contacto--bg-dark .wpforms-field select {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}

.comp-contacto--bg-dark .wpforms-field input::placeholder,
.comp-contacto--bg-dark .wpforms-field textarea::placeholder {
    color: rgba(255, 255, 255, .55);
}

.comp-contacto--bg-dark .wpforms-field input:focus,
.comp-contacto--bg-dark .wpforms-field textarea:focus {
    border-color: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .09);
}

.comp-contacto--bg-dark .wpforms-field-label {
    color: rgba(255, 255, 255, .9);
}

/* ── AJUSTES: placeholders más visibles + botón full width ── */

/* Placeholders más legibles */
.comp-contacto .wpforms-field input::placeholder,
.comp-contacto .wpforms-field textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

/* Botón a ancho completo de la columna */
.comp-contacto .wpforms-submit-container {
    width: 100%;
}

.comp-contacto button.wpforms-submit,
.comp-contacto .wpforms-submit {
    width: 100%;
    padding: 16px 34px;
    font-size: 17px;
}

.comp-contacto .wpforms-field input::placeholder,
.comp-contacto .wpforms-field textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}