/* Membresía Landing - estilos front-end
   Paleta de marca:
   --forest:#183322  --emerald:#0E5A3A  --gold:#D4A63A
   --darkgold:#A97718  --cream:#F3E4BF  --charcoal:#0C0B0A

   NOTA: muchos temas de WordPress (incluido Divi) traen reglas globales
   que "resetean" el estilo por defecto de <button>. Para que nuestros
   botones se vean siempre igual sin importar el tema, forzamos las
   propiedades visuales clave con !important. */

.ml-wrap{
    --ml-forest:#183322;
    --ml-emerald:#0E5A3A;
    --ml-gold:#D4A63A;
    --ml-darkgold:#A97718;
    --ml-cream:#F3E4BF;
    --ml-charcoal:#0C0B0A;
    font-family: 'Inter', sans-serif;
    max-width: 420px;
}

.ml-field{ margin-bottom: 18px !important; }

.ml-field-hint{
    font-size:12px !important;
    color: rgba(12,11,10,0.5) !important;
    margin:6px 0 0 0 !important;
    line-height:1.4 !important;
}

.ml-form label{
    display:block !important;
    font-size:13px !important;
    font-weight:500 !important;
    margin-bottom:7px !important;
    color: var(--ml-charcoal) !important;
}

.ml-form input[type=text],
.ml-form input[type=email],
.ml-form input[type=tel],
.ml-form select{
    width:100% !important;
    padding:12px 14px !important;
    border:1px solid rgba(12,11,10,0.16) !important;
    border-radius:3px !important;
    font-family:'Inter', sans-serif !important;
    font-size:14.5px !important;
    background:#FDFBF6 !important;
    color: var(--ml-charcoal) !important;
    box-sizing:border-box !important;
}

.ml-form input:focus,
.ml-form select:focus{
    outline:none !important;
    border-color: var(--ml-emerald) !important;
    box-shadow:0 0 0 3px rgba(14,90,58,0.12) !important;
}

.ml-consent{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin:22px 0 26px 0 !important;
}
.ml-consent input[type=checkbox]{
    margin-top:3px !important;
    width:16px !important;
    height:16px !important;
    accent-color: var(--ml-emerald) !important;
    flex:none !important;
}
.ml-consent label{
    font-size:13px !important;
    font-weight:400 !important;
    color: rgba(12,11,10,0.75) !important;
    line-height:1.5 !important;
    margin:0 !important;
}

.ml-cta{
    display:block !important;
    width:100% !important;
    padding:14px !important;
    background-color: var(--ml-emerald) !important;
    color: var(--ml-cream) !important;
    border:none !important;
    border-radius:3px !important;
    font-family:'Inter', sans-serif !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:normal !important;
    text-align:center !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition: background-color .15s ease !important;
}
.ml-cta:hover{ background-color: var(--ml-darkgold) !important; }
.ml-cta:disabled{ opacity:0.6 !important; cursor:not-allowed !important; }

.ml-fine-print{
    font-size:12px !important;
    line-height:1.6 !important;
    color: rgba(12,11,10,0.5) !important;
    margin-top:18px !important;
}

.ml-error{
    background: #fdecec !important;
    color:#8a1f1f !important;
    border:1px solid #f2b8b8 !important;
    border-radius:3px !important;
    padding:10px 12px !important;
    font-size:13px !important;
    margin-bottom:16px !important;
}

.ml-success h3{
    font-family:'Fraunces', serif !important;
    font-size:22px !important;
    margin:0 0 10px 0 !important;
    color: var(--ml-charcoal) !important;
}
.ml-success p{
    font-size:14px !important;
    color: rgba(12,11,10,0.65) !important;
    line-height:1.6 !important;
}

/* ---- Modal de credenciales (compartido por V1 y V2) ---- */
.ml-overlay{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    background: rgba(12,11,10,0.55) !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:99999 !important;
    padding:20px !important;
}
.ml-overlay.ml-open{ display:flex !important; }

.ml-modal{
    background:#fff !important;
    width:100% !important;
    max-width:420px !important;
    border-radius:4px !important;
    padding:32px 34px 34px 34px !important;
    box-sizing:border-box !important;
}

/* El encabezado del modal (título + botón cerrar) usa flexbox en el
   flujo normal del documento, en vez de position:absolute, para que
   no dependa de que el tema respete "position" en botones anidados. */
.ml-modal-header{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin:0 0 6px 0 !important;
}
.ml-modal-header h3{
    font-family:'Fraunces', serif !important;
    font-size:22px !important;
    margin:0 !important;
    color: var(--ml-charcoal) !important;
    flex:1 1 auto !important;
}
.ml-modal-close{
    display:block !important;
    flex:none !important;
    background:none !important;
    border:none !important;
    font-size:24px !important;
    line-height:1 !important;
    color: rgba(12,11,10,0.4) !important;
    cursor:pointer !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:none !important;
}
.ml-modal-close:hover{ color: var(--ml-charcoal) !important; }

.ml-modal-sub{
    font-size:13.5px !important;
    color: rgba(12,11,10,0.6) !important;
    line-height:1.55 !important;
    margin:0 0 24px 0 !important;
}

.ml-cred-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    border:1px solid rgba(12,11,10,0.1) !important;
    border-radius:3px !important;
    padding:12px 14px !important;
    margin-bottom:12px !important;
    background:#FDFBF6 !important;
}
.ml-cred-row .ml-label{
    display:block !important;
    font-size:11px !important;
    text-transform:uppercase !important;
    letter-spacing:0.05em !important;
    color: rgba(12,11,10,0.45) !important;
    font-weight:600 !important;
    margin-bottom:3px !important;
}
.ml-cred-row .ml-value{
    font-family: monospace !important;
    font-size:14px !important;
    color: var(--ml-charcoal) !important;
    word-break:break-all !important;
}
.ml-copy-btn{
    display:inline-block !important;
    flex:none !important;
    margin-left:12px !important;
    background-color:#FDFBF6 !important;
    border:1px solid rgba(12,11,10,0.16) !important;
    border-radius:3px !important;
    padding:6px 10px !important;
    font-size:12px !important;
    font-family:'Inter', sans-serif !important;
    color: var(--ml-emerald) !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
.ml-copy-btn:hover{ background-color: var(--ml-emerald) !important; color: var(--ml-cream) !important; border-color: var(--ml-emerald) !important; }

.ml-copy-all{
    display:block !important;
    width:100% !important;
    margin:6px 0 0 0 !important;
    padding:12px !important;
    background-color: var(--ml-forest) !important;
    color: var(--ml-cream) !important;
    border:none !important;
    border-radius:3px !important;
    font-family:'Inter', sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:normal !important;
    text-align:center !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
.ml-copy-all:hover{ background-color: var(--ml-emerald) !important; }

.ml-modal-close-secondary{
    display:block !important;
    width:100% !important;
    margin:10px 0 0 0 !important;
    padding:11px !important;
    background-color:transparent !important;
    border:1px solid rgba(12,11,10,0.16) !important;
    border-radius:3px !important;
    font-family:'Inter', sans-serif !important;
    font-size:13px !important;
    color: rgba(12,11,10,0.6) !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
.ml-modal-close-secondary:hover{ background-color: rgba(12,11,10,0.05) !important; }