/* =============================================================
   Twingital Featured — Contact Form
   Scope: .tdf-contact-*
   ============================================================= */

/* ── Fuente del sistema (no cargamos externa para no penalizar) ── */
:root {
    --tdf-c-primary:   #667eea;
    --tdf-c-primary-d: #4f63d2;
    --tdf-c-gold:      #f59e0b;
    --tdf-c-gold-d:    #d97706;
    --tdf-c-success:   #10b981;
    --tdf-c-error:     #ef4444;
    --tdf-c-text:      #1a1a2e;
    --tdf-c-muted:     #6b7280;
    --tdf-c-border:    #e5e7eb;
    --tdf-c-bg:        #f9fafb;
    --tdf-radius:      14px;
    --tdf-shadow:      0 20px 60px rgba(0, 0, 0, .18);
    --tdf-transition:  all .22s cubic-bezier(.4, 0, .2, 1);
}

/* ── Botón de apertura ── */
.tdf-contact-open-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         13px 26px;
    background:      linear-gradient(135deg, var(--tdf-c-gold), #fb923c);
    color:           #fff;
    font-size:       15px;
    font-weight:     700;
    letter-spacing:  .3px;
    border:          none;
    border-radius:   var(--tdf-radius);
    cursor:          pointer;
    text-decoration: none;
    box-shadow:      0 4px 18px rgba(245, 158, 11, .38);
    transition:      var(--tdf-transition);
    margin-top:      16px;
}
.tdf-contact-open-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 28px rgba(245, 158, 11, .5);
    background: linear-gradient(135deg, var(--tdf-c-gold-d), #f97316);
    color:      #fff;
}
.tdf-contact-open-btn:active { transform: translateY(0); }

/* ── Overlay + Modal ── */
.tdf-contact-modal {
    position:       fixed;
    inset:          0;
    z-index:        99990;
    display:        flex;
    align-items:    center;
    justify-content:center;
    padding:        20px;
}

.tdf-contact-modal-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(15, 15, 30, .65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation:  tdf-fade-in .2s ease both;
    cursor:     pointer;
}

.tdf-contact-modal-box {
    position:         relative;
    z-index:          1;
    width:            100%;
    max-width:        520px;
    max-height:       90vh;
    overflow-y:       auto;
    background:       #fff;
    border-radius:    var(--tdf-radius);
    box-shadow:       var(--tdf-shadow);
    padding:          36px 36px 32px;
    animation:        tdf-modal-in .28s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Scrollbar sutil dentro del modal */
.tdf-contact-modal-box::-webkit-scrollbar { width: 4px; }
.tdf-contact-modal-box::-webkit-scrollbar-thumb { background: var(--tdf-c-border); border-radius: 4px; }

/* ── Botón cerrar ── */
.tdf-contact-modal-close-btn {
    position:    absolute;
    top:         16px;
    right:       16px;
    width:       32px;
    height:      32px;
    display:     flex;
    align-items: center;
    justify-content: center;
    background:  var(--tdf-c-bg);
    border:      1px solid var(--tdf-c-border);
    border-radius: 50%;
    font-size:   14px;
    color:       var(--tdf-c-muted);
    cursor:      pointer;
    transition:  var(--tdf-transition);
    line-height: 1;
    padding:     0;
}
.tdf-contact-modal-close-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: var(--tdf-c-error);
    transform: rotate(90deg);
}

/* ── Encabezado del modal ── */
.tdf-contact-modal-title {
    margin:      0 0 4px;
    font-size:   22px;
    font-weight: 800;
    color:       var(--tdf-c-text);
    line-height: 1.2;
    padding-right: 36px; /* no solapar con el botón cerrar */
}

.tdf-contact-modal-subtitle {
    margin:    0 0 24px;
    font-size: 14px;
    color:     var(--tdf-c-muted);
}
.tdf-contact-modal-subtitle strong { color: var(--tdf-c-text); }

/* ── Separador decorativo ── */
.tdf-contact-modal-title::after {
    content:      '';
    display:      block;
    width:        40px;
    height:       3px;
    background:   linear-gradient(90deg, var(--tdf-c-gold), transparent);
    border-radius:2px;
    margin-top:   10px;
}

/* ── Feedback (éxito / error) ── */
.tdf-contact-feedback {
    padding:       14px 18px;
    border-radius: 10px;
    font-size:     14px;
    font-weight:   600;
    margin-bottom: 20px;
    animation:     tdf-fade-in .2s ease both;
}
.tdf-contact-feedback.tdf-cf-success {
    background: #d1fae5;
    color:      #065f46;
    border:     1px solid #6ee7b7;
}
.tdf-contact-feedback.tdf-cf-error {
    background: #fee2e2;
    color:      #991b1b;
    border:     1px solid #fca5a5;
}

/* ── Campos del formulario ── */
.tdf-contact-form-wrap {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.tdf-contact-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.tdf-contact-field label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--tdf-c-text);
    letter-spacing: .2px;
}

.tdf-contact-field input,
.tdf-contact-field textarea {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid var(--tdf-c-border);
    border-radius: 10px;
    font-size:     14px;
    color:         var(--tdf-c-text);
    background:    var(--tdf-c-bg);
    transition:    var(--tdf-transition);
    outline:       none;
    box-sizing:    border-box;
    font-family:   inherit;
    resize:        vertical;
}

.tdf-contact-field input:focus,
.tdf-contact-field textarea:focus {
    border-color: var(--tdf-c-primary);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(102, 126, 234, .14);
}

.tdf-contact-field input.tdf-cf-invalid,
.tdf-contact-field textarea.tdf-cf-invalid {
    border-color: var(--tdf-c-error);
    box-shadow:   0 0 0 3px rgba(239, 68, 68, .12);
    animation:    tdf-shake .3s ease both;
}

.tdf-contact-field input::placeholder,
.tdf-contact-field textarea::placeholder {
    color: #b0b8c4;
}

/* ── Botón enviar ── */
.tdf-contact-submit {
    width:          100%;
    padding:        14px;
    background:     linear-gradient(135deg, var(--tdf-c-primary), #764ba2);
    color:          #fff;
    font-size:      15px;
    font-weight:    700;
    letter-spacing: .4px;
    border:         none;
    border-radius:  10px;
    cursor:         pointer;
    transition:     var(--tdf-transition);
    box-shadow:     0 4px 18px rgba(102, 126, 234, .35);
    margin-top:     4px;
    position:       relative;
    overflow:       hidden;
}
.tdf-contact-submit::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,.08);
    opacity:    0;
    transition: opacity .2s;
}
.tdf-contact-submit:hover::before { opacity: 1; }
.tdf-contact-submit:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 26px rgba(102, 126, 234, .48);
}
.tdf-contact-submit:active { transform: translateY(0); }

.tdf-contact-submit:disabled {
    opacity:    .65;
    cursor:     not-allowed;
    transform:  none;
    box-shadow: none;
}

/* Estado enviando */
.tdf-contact-submit.tdf-cf-sending::after {
    content:     '';
    display:     inline-block;
    width:       14px;
    height:      14px;
    border:      2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation:   tdf-spin .7s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

/* ── Keyframes ── */
@keyframes tdf-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tdf-modal-in {
    from { opacity: 0; transform: scale(.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@keyframes tdf-spin {
    to { transform: rotate(360deg); }
}

@keyframes tdf-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-5px); }
    75%       { transform: translateX(5px); }
}

/* ── Responsive ── */
@media (max-width: 560px) {
    .tdf-contact-modal-box {
        padding:       24px 20px 20px;
        border-radius: 16px 16px 0 0;
        max-height:    92vh;
    }
    .tdf-contact-modal {
        align-items: flex-end;
        padding:     0;
    }
    .tdf-contact-modal-box { animation: tdf-sheet-in .28s cubic-bezier(.34, 1.2, .64, 1) both; }

    @keyframes tdf-sheet-in {
        from { transform: translateY(100%); opacity: .6; }
        to   { transform: translateY(0);    opacity: 1; }
    }
}