@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Instrument+Sans:wght@400;500;600;700&display=swap');

.sfqs-embed{
    --paper:#FBF3EA;
    --paper-deep:#F2E2D9;
    --paper-light:#FFFDF8;
    --ink:#2B211D;
    --ink-soft:#6E5D54;
    --rose:#9C4F63;
    --rose-soft:#D9A6B4;
    --gold:#AD8642;
    --gold-pale:#E7D3AC;
    --wine:#48202B;
    --shadow: 0 30px 60px -25px rgba(43,33,29,0.35);

    color:var(--ink);
    font-family:'Instrument Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    max-width:640px;
    margin:0 auto;
}
.sfqs-embed, .sfqs-embed *{ box-sizing:border-box; }
.sfqs-embed img{ max-width:100%; display:block; }
.sfqs-embed :where(a){ color:inherit; }
.sfqs-embed :focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

.sfqs-embed .mx-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    font-size:.76rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--gold);
    margin:0 0 .9rem;
}
.sfqs-embed .mx-eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--gold);
    display:inline-block;
}

.sfqs-embed h2, .sfqs-embed h3{
    font-family:'Fraunces', serif;
    margin:0;
    color:var(--ink);
    font-weight:340;
}
.sfqs-embed em{ font-style:italic; color:var(--rose); }

.sfqs-embed h2{
    font-size:clamp(1.7rem, 4vw, 2.3rem);
    line-height:1.14;
}
.sfqs-lede{
    font-size:1rem;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:48ch;
    margin:.9rem 0 1.8rem;
}

/* ── tarjeta contenedora, look "papel" con esquina asimétrica ── */
.sfqs-card{
    background:var(--paper);
    border:1px solid rgba(173,134,66,.25);
    border-radius:26px 12px 26px 12px;
    padding:clamp(1.6rem,4vw,2.4rem) clamp(1.4rem,4vw,2.2rem);
    box-shadow:var(--shadow);
}

.sfqs-form h3{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:560;
    font-size:1.18rem;
    color:var(--wine);
    margin:2rem 0 .3rem;
    padding-bottom:.5rem;
    border-bottom:1px dashed var(--gold);
}
.sfqs-form h3:first-child{ margin-top:0; }

.sfqs-row{ display:flex; gap:14px; flex-wrap:wrap; }
.sfqs-row .sfqs-field{ flex:1; min-width:190px; }

.sfqs-field{ margin-bottom:1.15rem; }
.sfqs-field label{
    display:block;
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:.45rem;
}
.sfqs-field input[type="text"],
.sfqs-field input[type="email"],
.sfqs-field input[type="url"],
.sfqs-field input[type="datetime-local"],
.sfqs-field textarea{
    width:100%;
    padding:.8rem .95rem;
    background:var(--paper-light);
    border:1.5px solid rgba(173,134,66,.35);
    border-radius:12px;
    font-family:'Instrument Sans', sans-serif;
    font-size:.96rem;
    color:var(--ink);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.sfqs-field input:focus,
.sfqs-field textarea:focus{
    outline:none;
    border-color:var(--rose);
    box-shadow:0 0 0 3px rgba(156,79,99,.12);
}
.sfqs-field textarea{ resize:vertical; min-height:5.2em; }

.sfqs-help{
    font-size:.8rem;
    color:var(--ink-soft);
    margin:.4rem 0 0;
    line-height:1.5;
}

/* ── inputs de archivo, estilo "casilla de aporte" ── */
.sfqs-file-field input[type="file"]{
    display:block;
    width:100%;
    padding:1.1rem .9rem;
    background:var(--paper-light);
    border:1.5px dashed var(--gold);
    border-radius:14px;
    font-size:.85rem;
    color:var(--ink-soft);
    cursor:pointer;
}
.sfqs-file-field input[type="file"]::file-selector-button{
    background:var(--wine);
    color:var(--gold-pale);
    border:none;
    padding:.55rem 1rem;
    border-radius:100px;
    font-size:.82rem;
    font-weight:600;
    margin-right:.8rem;
    cursor:pointer;
}

.sfqs-preview, .sfqs-gallery-preview img{
    max-width:96px;
    max-height:96px;
    border-radius:10px 4px 10px 4px;
    margin-top:.7rem;
    object-fit:cover;
    border:1px solid rgba(173,134,66,.4);
}
.sfqs-gallery-preview{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.7rem; }

/* ── botón, mismo pill que la landing ── */
.sfqs-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5em;
    width:100%;
    background:var(--wine);
    color:var(--gold-pale);
    border:none;
    padding:1rem 1.6rem;
    border-radius:100px;
    font-family:'Instrument Sans', sans-serif;
    font-weight:600;
    font-size:1rem;
    cursor:pointer;
    box-shadow:0 14px 26px -14px rgba(72,32,43,.55);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    margin-top:.4rem;
}
.sfqs-btn:hover{ transform:translateY(-2px); background:var(--rose); }
.sfqs-btn:disabled{ opacity:.55; cursor:default; transform:none; }

.sfqs-msg{
    margin-top:.9rem;
    font-size:.92rem;
    min-height:1.2em;
    text-align:center;
    font-weight:500;
}
.sfqs-msg.sfqs-ok{ color:#2B6B45; }
.sfqs-msg.sfqs-error{ color:var(--rose); }

/* ── avisos (sin token, ya procesado, pago pendiente, etc.) ── */
.sfqs-aviso{
    display:block;
    background:var(--paper);
    border:1px dashed var(--gold);
    border-radius:20px 8px 20px 8px;
    padding:1.6rem 1.8rem;
    text-align:center;
    color:var(--ink-soft);
    font-size:.98rem;
    line-height:1.6;
}

/* ── pestañas (crear cuenta / ya tengo cuenta) ── */
.sfqs-tabs{ display:flex; gap:.5rem; margin-bottom:1.4rem; border-bottom:1px solid rgba(173,134,66,.3); }
.sfqs-tab{
    background:none; border:none; cursor:pointer;
    font-family:'Instrument Sans', sans-serif;
    font-size:.92rem; font-weight:600;
    color:var(--ink-soft);
    padding:.7rem .3rem;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
}
.sfqs-tab.sfqs-tab-active{ color:var(--wine); border-bottom-color:var(--wine); }

/* ── link-button discreto (cerrar sesión, etc.) ── */
.sfqs-link-btn{
    background:none; border:none; cursor:pointer;
    font-family:'Instrument Sans', sans-serif;
    font-size:.85rem; color:var(--ink-soft);
    text-decoration:underline;
    padding:0;
}
.sfqs-link-btn:hover{ color:var(--rose); }

/* ── header del editor privado (saludo + logout) ── */
.sfqs-editor-top{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.4rem;
}

/* ── botón outline (vista previa) ── */
.sfqs-btn-outline{
    background:transparent;
    color:var(--wine);
    border:1.5px solid var(--wine);
    box-shadow:none;
}
.sfqs-btn-outline:hover{ background:var(--wine); color:var(--gold-pale); }

.sfqs-editor-acciones{
    display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem;
    padding-top:1.6rem; border-top:1px dashed var(--gold);
}
.sfqs-editor-acciones .sfqs-btn{ flex:1; min-width:200px; margin-top:0; }

/* ── modal de vista previa: iframe a pantalla completa ── */
.sfqs-preview-modal{
    position:fixed; inset:0; z-index:99999;
    background:rgba(43,33,29,.92);
    display:flex; flex-direction:column;
}
.sfqs-preview-modal-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:.9rem 1.2rem;
    color:#fff;
    font-family:'Instrument Sans', sans-serif;
    font-size:.9rem;
}
.sfqs-preview-modal-bar button{
    background:rgba(255,255,255,.12);
    border:none; color:#fff; cursor:pointer;
    padding:.5rem 1rem; border-radius:100px; font-size:.85rem;
}
#sfqs-preview-frame{
    flex:1;
    width:100%;
    border:none;
    background:#fff;
}

@media (max-width:560px){
    .sfqs-row{ flex-direction:column; }
    .sfqs-row .sfqs-field{ min-width:0; }
}

/* Progreso real de subida; indeterminado mientras el servidor guarda. */
.sfqs-upload-progress {
    display: block;
    width: 100%;
    height: 12px;
    margin: 18px 0 10px;
    accent-color: #987349;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
}
.sfqs-upload-progress::-webkit-progress-bar { background: #eee6dc; border-radius: 6px; }
.sfqs-upload-progress::-webkit-progress-value { background: #987349; border-radius: 6px; }
.sfqs-upload-progress::-moz-progress-bar { background: #987349; border-radius: 6px; }