/* OnePage Checkout - tema negro/blanco */
:root{
    --opc-black:#000;
    --opc-white:#fff;
    --opc-gray:#e6e6e6;
    --opc-gray-d:#444;
    --opc-line:#d9d9d9;
    --opc-ok:#1c7a1c;
    --opc-bad:#b00020;
}
*{box-sizing:border-box}
.opc-body{
    margin:0;background:var(--opc-black);color:var(--opc-black);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:15px;line-height:1.5;
}
.opc-wrap{max-width:1080px;margin:0 auto;padding:24px 16px 60px}

.opc-header{
    display:flex;justify-content:space-between;align-items:center;
    color:var(--opc-white);padding:12px 4px 20px;border-bottom:2px solid var(--opc-white);margin-bottom:24px;
}
.opc-title{font-size:24px;font-weight:700;letter-spacing:.3px}
.opc-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.opc-langsel{font-size:12px;letter-spacing:.5px}
.opc-langsel a,.opc-langsel a:link,.opc-langsel a:visited,.opc-langsel a:hover,.opc-langsel a:active{color:#fff;text-decoration:none}
.opc-langsel a{opacity:.55;padding:0 5px;border-right:1px solid rgba(255,255,255,.3)}
.opc-langsel a:last-child{border-right:none}
.opc-langsel a:hover{opacity:.9}
.opc-langsel a.is-active{opacity:1;font-weight:700;text-decoration:underline}
.opc-req{color:#c0392b}
.opc-account{font-size:14px}
.opc-account span{opacity:.8;margin-right:8px}
.opc-account a,.opc-account a:link,.opc-account a:visited,.opc-account a:hover{color:#fff;text-decoration:underline}

.opc-grid{display:flex;gap:20px;align-items:flex-start}
.opc-main{flex:1 1 auto;min-width:0}
.opc-aside{flex:0 0 320px;position:sticky;top:16px}

.opc-card{
    background:var(--opc-white);border:1px solid var(--opc-line);border-radius:8px;
    padding:18px 18px;margin-bottom:18px;
}
.opc-card h3{margin:0 0 14px;font-size:17px;display:flex;align-items:center;gap:10px}
.opc-step{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:50%;background:var(--opc-black);color:var(--opc-white);
    font-size:14px;font-weight:700;flex:0 0 auto;
}

/* Ciclos */
.opc-cycles{display:flex;flex-wrap:wrap;gap:10px}
.opc-cycle{
    flex:1 1 140px;border:2px solid var(--opc-line);border-radius:8px;padding:12px;cursor:pointer;
    display:flex;flex-direction:column;gap:4px;transition:.15s;
}
.opc-cycle input{display:none}
.opc-cycle.is-active{border-color:var(--opc-black);background:#fafafa}
.opc-cycle-label{font-weight:600}
.opc-cycle-price{font-size:14px;color:var(--opc-gray-d)}

/* Dominio */
.opc-domain-opts{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.opc-domain-opts label{display:flex;align-items:center;gap:6px;font-size:14px}
.opc-domain-search{display:flex;gap:8px;align-items:center}
.opc-domain-search input[type=text]{flex:1 1 auto;min-width:0;width:auto}
.opc-domain-result{margin-top:12px}
.opc-dom-ok{padding:10px 12px;background:#eef7ee;border:1px solid var(--opc-ok);border-radius:6px}
.opc-free{color:var(--opc-ok);font-weight:700}
.opc-was{color:var(--opc-gray-d);margin-left:6px;font-size:13px}
.opc-dom-bad{padding:10px 12px;background:#fbeaec;border:1px solid var(--opc-bad);border-radius:6px}
.opc-period{flex:0 0 auto;width:auto;min-width:96px}

/* Dominios adicionales */
.opc-extra{margin-top:18px;padding-top:16px;border-top:1px solid var(--opc-line,#e5e5e5)}
.opc-extra-head h4{margin:0 0 2px;font-size:15px}
.opc-extra-row{margin-bottom:12px}
.opc-extra-inputs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.opc-extra-inputs .opc-extra-domain{flex:1 1 180px;min-width:0;width:auto}
.opc-extra-inputs select{flex:0 0 auto;width:auto;min-width:96px}
.opc-extra-inputs .opc-extra-epp{flex:1 1 120px;min-width:0;width:auto}
.opc-extra-result{margin-top:8px}
.opc-btn-ghost{background:transparent;border:1px solid var(--opc-line,#ccc)}
.opc-extra-remove{font-size:18px;line-height:1;padding:6px 10px}

/* Plan colapsado (Paso 1) */
.opc-plan-mini{padding:16px 18px}
.opc-plan-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.opc-plan-info{display:flex;flex-direction:column;gap:3px}
.opc-plan-name{margin:0;font-size:24px;font-weight:800;line-height:1.2}
.opc-plan-cycle{font-size:14px;color:var(--opc-gray-d,#555)}
.opc-plan-change{flex:0 0 auto;font-size:14px;font-weight:600;text-decoration:underline;cursor:pointer;color:var(--opc-black)}
.opc-plan-change:hover{opacity:.7}
.opc-plan-cycles{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.opc-haveaccount{margin-top:10px}
.opc-haveaccount a{text-decoration:underline;cursor:pointer}

/* Recap Paso 2 (datos ya capturados) */
.opc-recap{margin-bottom:12px;padding:10px 12px;background:#f5f5f5;border-radius:6px;font-size:14px}
.opc-recap:empty{display:none}

/* Contraseña (ver/ocultar, generar, medidor de fuerza) */
.opc-field-pass,.opc-field-secq{grid-column:1 / -1}
.opc-pass-row{display:flex;gap:8px;align-items:center}
.opc-pass-row input{flex:1 1 auto;min-width:0;width:auto}
.opc-pass-eye{flex:0 0 auto;background:var(--opc-white);border:1px solid var(--opc-line);border-radius:6px;padding:8px 11px;cursor:pointer;font-size:15px;line-height:1}
.opc-pass-eye.is-on{background:var(--opc-gray)}
.opc-pass-gen{flex:0 0 auto;white-space:nowrap}
.opc-pass-meter{height:6px;background:#e6e6e6;border-radius:4px;margin-top:8px;overflow:hidden}
.opc-pass-bar{display:block;height:100%;width:0;transition:width .2s ease,background .2s ease}
.opc-pass-none{background:transparent}
.opc-pass-weak{background:var(--opc-bad)}
.opc-pass-medium{background:#d98e00}
.opc-pass-strong{background:var(--opc-ok)}
.opc-pass-hint{margin-top:6px}
.opc-pass-bad{color:var(--opc-bad)}
.opc-pass-good{color:var(--opc-ok)}

/* Bloqueo por VPN */
.opc-vpn-block{background:#fbeaec;border:1px solid var(--opc-bad,#b00020);color:var(--opc-bad,#b00020);padding:14px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;font-weight:600;line-height:1.4}

/* Cross-sell buzones de email */
.opc-email-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;padding:4px 0;cursor:pointer;font-size:15px;font-weight:700;color:var(--opc-black);text-align:left}
.opc-email-caret{font-size:20px;line-height:1;font-weight:400}
.opc-email-intro{margin:8px 0 14px}
.opc-email-tier-pick{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:14px;cursor:pointer}
.opc-email-tier{border-top:1px solid var(--opc-line,#e5e5e5);margin-top:4px}
.opc-email-opts{padding:6px 0 10px 26px}
.opc-email-opt{display:flex;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap}
.opc-email-opt-label{flex:1 1 120px}
.opc-email-opt-price{color:var(--opc-gray-d,#555);font-size:14px;white-space:nowrap}
.opc-email-qty{flex:0 0 72px;width:72px}

/* Saludo Paso 2 */
.opc-greet{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.opc-greet #opcGreetText{font-weight:600}
.opc-edit-link{font-size:14px;text-decoration:underline;color:var(--opc-gray-d,#555);cursor:pointer}
.opc-edit-link:hover{color:var(--opc-black,#000)}

/* Campos */
.opc-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opc-field{display:flex;flex-direction:column;gap:4px}
.opc-field label{font-size:13px;font-weight:600}
.opc-field input,.opc-field select{}
input[type=text],input[type=email],input[type=password],select{
    width:100%;padding:9px 10px;border:1px solid var(--opc-line);border-radius:6px;
    font-size:14px;background:var(--opc-white);color:var(--opc-black);
}
input:focus,select:focus{outline:none;border-color:var(--opc-black)}
.opc-loggedin{background:#f5f5f5;padding:12px;border-radius:6px}
.opc-cf-tickwrap{grid-column:1 / -1}
.opc-cf-tick{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px}
.opc-fiscal{margin-top:16px;border-top:1px dashed var(--opc-line);padding-top:14px}
.opc-fiscal-head h4{margin:0 0 4px;font-size:15px}
.opc-fiscal-head .opc-note{margin:0 0 12px}

/* Promo */
.opc-promo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.opc-promo input{flex:0 1 240px}
.opc-promo-msg{font-size:13px}
.opc-promo-msg.is-ok{color:var(--opc-ok)}
.opc-promo-msg.is-err{color:var(--opc-bad)}

/* Gateways */
.opc-gateways{display:flex;flex-direction:column;gap:10px}
.opc-gateway{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--opc-line);border-radius:6px;cursor:pointer}
.opc-pay-prompt{margin-top:10px;color:var(--opc-bad);font-size:14px}

/* Botones */
.opc-btn{
    background:var(--opc-black);color:var(--opc-white);border:2px solid var(--opc-black);
    border-radius:6px;padding:10px 18px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;
}
.opc-btn:hover{background:#fff;color:#000}
.opc-btn:disabled{opacity:.5;cursor:not-allowed}
.opc-btn-sm{padding:8px 14px;font-size:14px}
/* CTA grande: va sobre el fondo negro, así que lo hacemos blanco para que resalte. */
.opc-btn-lg{
    display:block;width:100%;padding:16px;font-size:18px;font-weight:700;margin-top:16px;
    background:var(--opc-white);color:var(--opc-black);border:2px solid var(--opc-white);
    border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.45);letter-spacing:.2px;
}
.opc-btn-lg:hover{background:var(--opc-gray);color:var(--opc-black);border-color:var(--opc-gray)}
.opc-btn-lg:disabled{opacity:.45;cursor:not-allowed}

/* Resumen */
.opc-summary-table{width:100%;border-collapse:collapse}
.opc-summary-table td{padding:8px 0;border-bottom:1px solid var(--opc-line);vertical-align:top}
.opc-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.opc-summary-table .opc-total td{font-weight:700;font-size:17px;border-bottom:none;border-top:2px solid var(--opc-black);padding-top:12px}
.opc-discount td{color:var(--opc-ok)}
.opc-note{font-size:12px;color:var(--opc-gray-d);margin:10px 0 0}
.opc-secure{color:var(--opc-white);text-align:center;font-size:13px;margin-top:8px;opacity:.85}
.opc-loading{color:var(--opc-gray-d);font-size:14px}

/* Alertas */
.opc-alert{background:#fbeaec;border:1px solid var(--opc-bad);color:var(--opc-bad);padding:10px 12px;border-radius:6px;margin-bottom:12px}

/* Modal */
.opc-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}
.opc-modal-box{background:var(--opc-white);border-radius:8px;padding:24px;width:360px;max-width:92vw;position:relative}
.opc-modal-box h3{margin:0 0 16px}
.opc-modal-box .opc-field{margin-bottom:12px}
.opc-modal-close{position:absolute;top:10px;right:14px;border:none;background:none;font-size:24px;cursor:pointer;line-height:1}

.opc-tos label{display:flex;align-items:center;gap:8px;font-size:14px}
.opc-error{text-align:center}

@media(max-width:860px){
    .opc-grid{flex-direction:column}
    .opc-aside{flex:1 1 auto;width:100%;position:static}
    .opc-fields{grid-template-columns:1fr}
}

/* ---- Oferta Flash (upgrade de período) ---- */
.opc-flash:not(.opc-flash-on){display:none !important}
.opc-flash{border:2px solid #f5a623;background:#fff7e8}
.opc-flash-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.opc-flash-title{margin:0;color:#a8690a}
.opc-flash-timer{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;background:#d9480f;border-radius:6px;padding:4px 10px;font-size:14px;white-space:nowrap}
.opc-flash-sub{margin:8px 0 12px}
.opc-flash-opts{display:flex;flex-wrap:wrap;gap:10px}
.opc-flash-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
    border:1.5px solid var(--opc-line);background:#fff;border-radius:8px;padding:10px 14px;min-width:120px;
    font-family:inherit;font-size:14px;color:var(--opc-black);text-align:left;transition:border-color .12s,box-shadow .12s}
.opc-flash-opt:hover{border-color:#f5a623}
.opc-flash-opt.is-active{border-color:#d9480f;box-shadow:0 0 0 2px rgba(217,72,15,.25)}
.opc-flash-opt-label{font-weight:600}
.opc-flash-opt-badge{font-size:12px;font-weight:700;color:#fff;background:#2e7d32;border-radius:4px;padding:1px 6px}
.opc-flash-opt-price{font-size:13px;opacity:.75}
.opc-flash-keep{justify-content:center;align-items:center;color:var(--opc-gray-d);font-weight:500}
.opc-flash-expired{margin:6px 0 0;color:#a8690a;font-weight:600;font-size:13px}
.opc-promo input.opc-locked{background:#f1f1f1;color:#555;cursor:not-allowed;border-style:dashed}
