/* compra.css — flow de compra (C.1 hosting + futuro) */

/* ============ DOMINIOS SECTION ============ */
.nx-compra-dominios-section {
    margin-bottom: 40px;
}

.nx-compra-dominios-header {
    font-size: 16px;
    color: #111827;
    margin: 0 0 16px;
    font-weight: 600;
}

.nx-compra-dominios-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.nx-dominio-card {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 12px;
    padding: 12px 12px 12px 16px;
    transition: border-color .15s, box-shadow .15s;
    min-width: 220px;
}

.nx-dominio-card:hover {
    border-color: #5B61E8;
    box-shadow: 0 1px 4px rgba(15,26,40,.08);
}

.nx-dominio-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.nx-dominio-card-name {
    font-weight: 700;
    color: #111827;
    font-size: 14px;
}

.nx-dominio-card-prices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nx-dominio-card-prices li {
    font-size: 13px;
    color: #111827;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.nx-dominio-card-prices li.is-promo .nx-dominio-precio-amount {
    color: #16a34a;
}

.nx-dominio-precio-amount {
    color: #111827;
}

.nx-dominio-precio-label {
    font-size: 11px;
    color: #6b7280;
}

.nx-dominio-card-remove {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}

.nx-dominio-card-remove:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* ============ MAIN SECTION ============ */
.nx-compra-main {
    background: #F4F6FA;
    color: #111827;
    padding: 32px 0 96px;
}

.nx-back-link {
    display: inline-block;
    color: #5B61E8;
    text-decoration: underline;
    font-size: 14px;
    margin-bottom: 24px;
}

.nx-back-link:hover {
    color: #4147c4;
}

.nx-compra-titulo {
    text-align: center;
    color: #111827;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 40px;
}

/* TABS CATEGORÍA */
.nx-plan-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
    border-bottom: 1px solid #d8dde6;
}

.nx-plan-tab {
    background: transparent;
    color: #6b7280;
    border: none;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
}

.nx-plan-tab:hover {
    color: #111827;
}

.nx-plan-tab.is-active {
    color: #5B61E8;
    border-bottom-color: #5B61E8;
}

/* PILL PERÍODO — light style coherente con C.2 */
.nx-periodo-switch {
    display: flex;
    background: #f0f2f5;
    padding: 4px;
    border-radius: 999px;
    width: max-content;
    margin: 0 auto 40px;
}

.nx-periodo-btn {
    background: transparent;
    border: none;
    color: #506680;
    padding: 8px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}

.nx-periodo-btn.is-active {
    background: #fff;
    color: #0F1A28;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 26, 40, .08);
}

/* PANEL DE PLANES */
.nx-plan-panel {
    display: none;
}

.nx-plan-panel.is-active {
    display: block;
}

.nx-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
    justify-content: center;
}

.nx-plan-extra {
    margin-top: 24px;
}

.nx-plan-extra[hidden] {
    display: none;
}

/* CARD */
.nx-plan-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    position: relative;
    box-shadow: 0 2px 8px rgba(15,26,40,.06), 0 0 0 1px rgba(15,26,40,.04);
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nx-plan-card:hover {
    box-shadow: 0 6px 20px rgba(15,26,40,.10), 0 0 0 1px rgba(15,26,40,.06);
    transform: translateY(-2px);
}

.nx-plan-card.is-destacado {
    box-shadow: 0 4px 16px rgba(91,97,232,.18), 0 0 0 2px #5B61E8;
}

.nx-plan-nombre {
    font-size: 22px;
    margin: 0 0 16px;
    color: #111827;
    font-weight: 700;
}

/* PRECIO BLOCK */
.nx-plan-precio-block {
    margin-bottom: 20px;
    min-height: 70px;
}

.nx-plan-precio-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.nx-plan-precio-amount {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.nx-plan-precio-suffix {
    font-size: 13px;
    color: #6b7280;
}

.nx-plan-precio-renueva {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
    min-height: 18px;
}

/* CTA BUTTON */
.nx-btn-contratar {
    width: 100%;
    background: #C9F048;
    color: #0F1A28;
    border: none;
    padding: 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: padding 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    margin-bottom: 24px;
}

/* Efecto Figma — consistente con .nx-btn:hover */
.nx-btn-contratar:hover:not(:disabled) {
    box-shadow: inset 0 -4px 0 #898ef2;
    padding-top: 12px;
    padding-bottom: 16px;
}

.nx-btn-contratar.is-gradient {
    background: linear-gradient(90deg, #C9F048 0%, #898EF2 100%);
    color: #0F1A28;
}

/* Variante gradient: heredando el hover universal de .nx-btn-contratar arriba */

.nx-btn-contratar:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* FEATURES */
.nx-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #374151;
    font-size: 14px;
    text-align: center;
    flex: 1;
}

.nx-plan-features li {
    padding: 8px 0;
}

.nx-plan-feature-performance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #5B61E8;
}

.nx-plan-feature-performance svg {
    flex-shrink: 0;
}

/* EMPTY / FOOTER */
.nx-plan-empty {
    text-align: center;
    color: #6b7280;
    padding: 60px 20px;
    font-size: 16px;
}

.nx-plan-empty-periodo {
    text-align: center;
    color: #6b7280;
    padding: 60px 20px;
    font-size: 16px;
    margin: 0;
}

.nx-plan-card.is-hidden {
    display: none;
}

.nx-plan-show-all-wrap {
    text-align: center;
    margin-top: 32px;
}

.nx-compra-sin-hosting-wrap {
    text-align: center;
    margin-top: 56px;
}

.nx-link-button {
    background: transparent;
    border: none;
    color: #5B61E8;
    font-size: 15px;
    cursor: pointer;
    text-decoration: underline;
    padding: 8px 12px;
}

.nx-link-button:hover {
    color: #4147c4;
}

/* ============ RESPONSIVE ============ */
/* Ribbon "Más Vendido" diagonal en esquina superior-izquierda */
.nx-plan-ribbon {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    background: #F6FD60;
    color: #0F1A28;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .nx-compra-titulo { font-size: 22px; }
    .nx-plan-grid { grid-template-columns: 1fr; }
    .nx-plan-tabs { gap: 0; }
    .nx-plan-tab { padding: 12px 14px; font-size: 14px; }
    .nx-plan-card { padding: 24px 20px; }
    .nx-plan-precio-amount { font-size: 28px; }
    /* DNS: los dos campos se apilan en mobile (evita desborde horizontal). */
    .nx-tucompra-dns { grid-template-columns: 1fr; }
    /* Cards con menos padding lateral en mobile para ganar ancho útil. */
    .nx-tucompra-card { padding: 20px 16px; }
    .nx-tucompra-title { font-size: 26px; }
}

/* === C.2 — Tu compra (/new/compra) ===
   Namespace `.nx-tucompra-*` para evitar colisiones con C.1.
   Reusa: .nx-btn, .nx-btn-primary, .nx-btn-gradient, .nx-btn-pill-add/-remove de site.css
*/

.nx-tucompra-section { padding: 32px 0 60px; background: #e9ebee; }
.nx-tucompra-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1024px) { .nx-tucompra-layout { grid-template-columns: 1fr; } }

.nx-tucompra-main { display: flex; flex-direction: column; gap: 24px; }
/* En "Tu compra" de hosting, el plan va primero (el dominio es su configuración). */
.nx-tucompra-plan-first { order: -1; }
.nx-tucompra-title { color: #0F1A28; font-size: 32px; font-weight: 700; margin: 0 0 24px; }
.nx-tucompra-section-title { font-size: 22px; font-weight: 700; color: #0F1A28; margin: 16px 0 0; }

.nx-tucompra-card { background: #fff; border: 1px solid #e6e8ec; border-radius: 16px; padding: 24px; }
.nx-tucompra-card-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: #0F1A28; }

/* Dominios (filas en el cart) */
.nx-tucompra-dominios { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.nx-tucompra-dominio-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid #e6e8ec; border-radius: 12px;
    background: #fff;
}
.nx-tucompra-dominio-row.is-principal { border-color: #898EF2; background: #f5f6ff; }
.nx-tucompra-dominio-name { font-weight: 600; color: #0F1A28; flex: 1; min-width: 0; word-break: break-all; }
.nx-tucompra-dominio-precio { color: #506680; font-size: 14px; white-space: nowrap; }
.nx-tucompra-dominio-badge {
    display: inline-flex; align-items: center; padding: 2px 10px;
    background: #C9F048; color: #0F1A28; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.nx-tucompra-principal-toggle {
    background: transparent; border: 1px solid #d0d6e0; color: #506680;
    border-radius: 999px; padding: 4px 10px; font-size: 11px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.nx-tucompra-principal-toggle:hover { border-color: #898EF2; color: #898EF2; }
.nx-tucompra-dominio-remove {
    background: transparent; border: 0; cursor: pointer; padding: 6px;
    font-size: 18px; line-height: 1; color: #506680;
    border-radius: 6px; transition: background .15s, color .15s;
}
.nx-tucompra-dominio-remove:hover:not(:disabled) { background: #f5f7fa; color: #c44; }
.nx-tucompra-dominio-remove:disabled { color: #ccc; cursor: not-allowed; }

/* DNS */
.nx-tucompra-dns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding-top: 16px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, #898EF2 0%, #F6FD60 35%, #C2F9C6 65%, #898EF2 100%) 1;
}
.nx-tucompra-dns-title { grid-column: 1 / -1; font-size: 14px; margin: 0 0 4px; color: #506680; font-weight: 600; }
.nx-tucompra-field { display: flex; flex-direction: column; gap: 6px; }
.nx-tucompra-field-label { font-size: 13px; color: #506680; }
/* Checkbox "registrar/comprar el dominio" (Caso A): fila legible, checkbox visible con color de marca. */
.nx-tucompra-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; cursor: pointer; font-size: 14px; line-height: 18px; color: #0F1A28; }
.nx-tucompra-check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: #5B61E8; cursor: pointer; }
.nx-tucompra-input, .nx-tucompra-select, .nx-tucompra-textarea {
    padding: 10px 12px; border: 1px solid #d0d6e0; border-radius: 8px;
    font-size: 14px; font-family: inherit; background: #fff; color: #0F1A28;
    width: 100%; box-sizing: border-box; min-width: 0;
}
.nx-tucompra-input:read-only { background: #f5f7fa; color: #777; }
.nx-tucompra-textarea { resize: vertical; min-height: 70px; }

/* Plan card */
.nx-tucompra-plan-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.nx-tucompra-plan-nombre { font-size: 16px; font-weight: 700; color: #0F1A28; margin: 0; }
.nx-tucompra-plan-precio { color: #0F1A28; font-size: 15px; font-weight: 600; margin: 4px 0 0; }
.nx-tucompra-plan-precio .nx-tucompra-plan-periodo { color: #506680; font-weight: 500; font-size: 13px; }
.nx-tucompra-plan-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nx-tucompra-plan-cambiar {
    color: #5B61E8; font-size: 13px; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}
.nx-tucompra-plan-cambiar:hover { color: #4147c4; }
.nx-tucompra-resumen-editar {
    display: inline-block; margin-top: 6px;
    color: #5B61E8; font-size: 13px; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}
.nx-tucompra-resumen-editar:hover { color: #4147c4; }
.nx-tucompra-plan-quitar {
    background: transparent; border: 0; color: #c44;
    cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline;
}
.nx-tucompra-plan-quitar:hover { color: #a32; }

/* Periodo dropdown (estilo Figma) */
.nx-tucompra-periodo-dropdown { display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.nx-tucompra-periodo-label { font-size: 13px; color: #0F1A28; font-weight: 600; }
.nx-tucompra-periodo-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 12px 40px 12px 16px;
    border: 1px solid #0F1A28; border-radius: 12px;
    background: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230F1A28' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    font-size: 15px; color: #0F1A28; font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.nx-tucompra-periodo-select:hover { border-color: #5B61E8; }
.nx-tucompra-periodo-select:focus { outline: 0; border-color: #5B61E8; box-shadow: 0 0 0 3px rgba(91, 97, 232, .15); }

/* Adicionales — cards Figma: header con título + precio (+IVA + periodo), descripción, footer con cantidad/Agregar */
.nx-tucompra-adicionales { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.nx-tucompra-adicional { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.nx-tucompra-adicional.is-on { border-color: #C9F048; background: #fcffe8; }
.nx-tucompra-adicional-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.nx-tucompra-adicional-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nx-tucompra-adicional-icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; color: #0F1A28;
}
.nx-tucompra-adicional.is-on .nx-tucompra-adicional-icon { color: #5B61E8; }
.nx-tucompra-adicional-title { font-size: 16px; font-weight: 700; color: #0F1A28; margin: 0; }
.nx-tucompra-adicional-price-block { text-align: right; flex-shrink: 0; }
.nx-tucompra-adicional-precio { font-size: 16px; font-weight: 700; color: #0F1A28; white-space: nowrap; }
.nx-tucompra-adicional-iva { font-size: 12px; font-weight: 500; color: #506680; }
.nx-tucompra-adicional-periodo { font-size: 13px; color: #506680; margin-top: 2px; }
.nx-tucompra-adicional-desc { font-size: 14px; color: #506680; margin: 0; line-height: 1.5; }
/* Leyenda de adicional pagado solo con créditos (plan flexible) — réplica legacy. */
.nx-tucompra-adicional-nota-credito { font-size: 12px; color: #506680; font-style: italic; margin: 0 0 4px; }
/* "Tu plan" flexible: descriptor en vez de "$0 / Mensual". */
.nx-tucompra-plan-flex-nota { color: #506680; font-weight: 500; font-size: 14px; }
.nx-tucompra-adicional-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }

/* Stepper de cantidad estilo Figma */
.nx-tucompra-cantidad-wrap { display: flex; flex-direction: column; gap: 6px; }
.nx-tucompra-cantidad-label { font-size: 13px; color: #0F1A28; font-weight: 500; }
.nx-tucompra-cantidad-stepper {
    display: inline-flex; align-items: center; border: 1px solid #d0d6e0;
    border-radius: 8px; overflow: hidden; background: #fff;
}
.nx-tucompra-cant-btn {
    width: 40px; height: 40px; background: transparent; border: 0;
    font-size: 18px; color: #0F1A28; cursor: pointer; transition: background .15s;
}
.nx-tucompra-cant-btn:hover { background: #f5f7fa; }
.nx-tucompra-cantidad-stepper input {
    width: 64px; height: 40px; border: 0; border-left: 1px solid #d0d6e0; border-right: 1px solid #d0d6e0;
    text-align: center; font-size: 14px; color: #0F1A28; padding: 0;
    appearance: textfield; -moz-appearance: textfield;
}
.nx-tucompra-cantidad-stepper input::-webkit-outer-spin-button,
.nx-tucompra-cantidad-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nx-tucompra-cantidad-stepper input:disabled { background: #f5f7fa; color: #aaa; }

/* Detalles */
.nx-tucompra-detalles { display: flex; flex-direction: column; gap: 14px; }
.nx-tucompra-tos { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #0F1A28; }
.nx-tucompra-tos input { margin-top: 3px; }
.nx-tucompra-tos a { color: #5B61E8; text-decoration: underline; cursor: pointer; }
.nx-tucompra-required { color: #c44; }

/* Sidebar resumen — Figma .checkout-summary (2699:242344):
   bg lavender claro #EFEEFD, dividers gradient lila→amarillo→teal→lila,
   título 20px medium, IVA color gris-azulado. */
.nx-tucompra-sidebar { position: sticky; top: 24px; align-self: start; }
.nx-tucompra-resumen {
    background: #EFEEFD; border-radius: 20px; padding: 32px;
    display: flex; flex-direction: column; gap: 16px;
    box-shadow:
        0 2px 1px -1px rgba(15, 26, 40, 0.04),
        0 4px 3px -2px rgba(15, 26, 40, 0.03),
        0 12px 8px -4px rgba(15, 26, 40, 0.08);
}
/* Cuerpo del Resumen (contenedor del re-render AJAX en /compra). Replica el layout flex
   de .nx-tucompra-resumen para que el espaciado entre ítems —y con la línea separadora—
   sea idéntico al de /compra/pago, donde el partial va directo dentro del flex. Sin esto,
   en /compra los ítems quedaban en flujo de bloque (más apretados que en /pago). */
[data-resumen-body] { display: flex; flex-direction: column; gap: 16px; }
.nx-tucompra-resumen-title {
    font-size: 20px; font-weight: 500; line-height: 1.2;
    margin: 0; color: #0F1A28;
}
.nx-tucompra-resumen-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 16px 0 0;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, #898EF2 0%, #F6FD60 35%, #C2F9C6 65%, #898EF2 100%) 1;
}
.nx-tucompra-resumen-item-main { min-width: 0; flex: 1; }
.nx-tucompra-resumen-item-nombre { font-size: 16px; font-weight: 600; color: #0F1A28; line-height: 20px; overflow-wrap: anywhere; }
.nx-tucompra-resumen-item-sub { font-size: 14px; color: #535862; line-height: 18px; margin-top: 4px; overflow-wrap: anywhere; }
.nx-tucompra-resumen-item-precio { font-size: 14px; font-weight: 400; color: #0F1A28; line-height: 18px; white-space: nowrap; }
/* Créditos de cortesía: el detalle ("por N · equivale a $X") ocupa el ancho completo (fila
   propia bajo nombre|valor), para que el monto del código no se apriete ni salte de línea. */
.nx-tucompra-resumen-item--cred { flex-wrap: wrap; }
.nx-tucompra-resumen-item-sub--full { flex: 0 0 100%; width: 100%; margin-top: 0; }

/* Resumen de servicios configurables (VPS/Dedicado/M365): nombre+precio arriba, config a ancho
   completo como lista de una columna con íconos (mismos del configurador). 1 columna = robusto a
   items largos y a móvil. */
.nx-tucompra-resumen-item--pg { flex-direction: column; align-items: stretch; }
.nx-tucompra-resumen-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; width: 100%; }
.nx-tucompra-resumen-cfg { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.nx-tucompra-resumen-cfg-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #535862; line-height: 1.35; }
.nx-tucompra-resumen-cfg-item svg { flex: 0 0 auto; width: 17px; height: 17px; color: #5B61E8; margin-top: 1px; }
.nx-tucompra-resumen-cfg-item > span { min-width: 0; overflow-wrap: anywhere; }
.nx-tucompra-resumen-cfg-item b { color: #0F1A28; font-weight: 600; }

/* --- Pantallas de cierre de compra (voucher / confirmación / error): card de resultado --- */
.nx-cierre { padding: 48px 20px 64px; display: flex; justify-content: center; }
.nx-cierre-card { background: #fff; border: 1px solid #e6e8ec; border-radius: 20px; width: 100%; max-width: 560px; padding: 40px 36px; text-align: center; box-shadow: 0 10px 34px rgba(15,26,40,.06); }
.nx-cierre-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.nx-cierre-icon.is-ok { background: #e9f7ef; }
.nx-cierre-icon.is-err { background: #fdece3; }
.nx-cierre-title { font-size: 26px; line-height: 1.2; margin: 0 0 10px; color: #0F1A28; }
.nx-cierre-lead { font-size: 15px; color: #535862; margin: 0 0 26px; line-height: 1.5; }
.nx-cierre-detail { background: #f3f4f8; border: 1px solid #e6e8ec; border-radius: 14px; padding: 20px 22px; text-align: left; margin: 0 0 26px; }
.nx-cierre-detail-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #708098; margin: 0 0 14px; }
.nx-cierre-prod-k { font-size: 12px; color: #708098; }
.nx-cierre-prod-name { font-size: 15px; font-weight: 700; color: #0F1A28; line-height: 1.3; margin-top: 2px; }
.nx-cierre-prod-feats { margin: 8px 0 0; padding: 0; list-style: none; }
.nx-cierre-prod-feats li { position: relative; padding: 2px 0 2px 16px; font-size: 13.5px; color: #535862; line-height: 1.4; }
.nx-cierre-prod-feats li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #c3cad6; }
.nx-cierre-prod + .nx-cierre-prod { margin-top: 12px; }
.nx-cierre-sep { height: 1px; background: #e3e6ec; margin: 16px 0; }
.nx-cierre-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 6px 0; font-size: 14px; }
.nx-cierre-row .k { color: #535862; }
.nx-cierre-row .v { font-weight: 600; color: #0F1A28; text-align: right; }
.nx-cierre-row.is-total { padding-top: 14px; margin-top: 6px; border-top: 1px solid #e3e6ec; }
.nx-cierre-row.is-total .k { font-weight: 700; color: #0F1A28; font-size: 15px; }
.nx-cierre-row.is-total .v { font-size: 20px; font-weight: 800; }
.nx-cierre-badge { display: inline-flex; align-items: center; gap: 8px; background: #f3f4f8; border: 1px solid #e6e8ec; border-radius: 999px; padding: 8px 16px; font-size: 14px; color: #0F1A28; margin: 0 0 22px; }
.nx-cierre-actions { display: flex; flex-direction: column; gap: 12px; }
.nx-cierre-actions .nx-btn-contratar { display: block; width: 100%; text-align: center; }
.nx-cierre-hint { font-size: 12.5px; color: #708098; margin-top: 18px; }
@media (max-width: 560px) { .nx-cierre-card { padding: 32px 22px; } }
.nx-tucompra-cupon-link {
    display: inline-block; color: #5B61E8; font-size: 16px; font-weight: 600;
    text-decoration: none; margin: 8px 0 0; cursor: pointer;
}
.nx-tucompra-cupon-link:hover { text-decoration: underline; }
.nx-tucompra-resumen-divider {
    height: 1px; margin: 16px 0; border: 0;
    background: linear-gradient(90deg, #898EF2 0%, #F6FD60 35%, #C2F9C6 65%, #898EF2 100%);
}
.nx-tucompra-resumen-totales { display: flex; flex-direction: column; gap: 0; color: #0F1A28; }
.nx-tucompra-subtotal-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; font-weight: 500; color: #0F1A28; line-height: 22px; }
.nx-tucompra-iva-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; color: #3A5476; line-height: 20px; }
.nx-tucompra-total-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 20px; font-weight: 500; line-height: 1.2; margin-top: 24px; color: #0F1A28; }

/* Continuar — pill con gradiente Figma (amarillo → lime → violeta) */
.nx-tucompra-resumen-continuar {
    width: 100%; margin-top: 20px;
    padding: 18px 24px; border-radius: 999px;
    border: 0; cursor: pointer;
    font-size: 16px; font-weight: 700; line-height: 1;
    color: #0F1A28; text-align: center;
    background: linear-gradient(90deg, #F6FD60 0%, #C9F048 45%, #898EF2 100%);
    box-shadow: 0 1px 2px rgba(15, 26, 40, .08);
    /* Convención Figma unificada: padding shift + thick bottom navy. */
    transition: padding .15s ease, box-shadow .15s ease, filter .15s, transform .05s;
}
.nx-tucompra-resumen-continuar:hover:not(:disabled) {
    /* Patrón 1 Primary (buttons_hover_figma.md): thick bottom LILA + padding shift. */
    filter: brightness(1.04);
    padding-top: 16px;
    padding-bottom: 20px;
    box-shadow: inset 0 -4px 0 #898ef2;
}
.nx-tucompra-resumen-continuar:active:not(:disabled) { transform: translateY(1px); }
.nx-tucompra-resumen-continuar:disabled { opacity: .5; cursor: not-allowed; }

.nx-tucompra-resumen-vaciar {
    width: 100%; margin-top: 10px;
    padding: 12px 24px; border-radius: 999px;
    border: 1px solid rgba(15, 26, 40, .15); cursor: pointer;
    font-size: 14px; font-weight: 600; line-height: 1;
    color: #6B7280; text-align: center;
    background: transparent;
    transition: padding .15s ease, box-shadow .15s ease, color .15s, border-color .15s;
}
.nx-tucompra-resumen-vaciar:hover:not(:disabled) {
    color: #B91C1C;
    border-color: #B91C1C;
    padding-top: 10px;
    padding-bottom: 14px;
    box-shadow: inset 0 -4px 0 0 #B91C1C;
}
.nx-tucompra-resumen-vaciar:disabled { opacity: .5; cursor: not-allowed; }

/* Modal */
.nx-tucompra-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.nx-tucompra-modal[hidden] { display: none; }
.nx-tucompra-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 26, 40, .55); }
.nx-tucompra-modal-content { position: relative; background: #fff; max-width: 720px; max-height: 80vh; width: calc(100% - 32px); border-radius: 16px; padding: 32px; overflow: auto; }
.nx-tucompra-modal-close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; font-size: 24px; cursor: pointer; color: #506680; }
.nx-tucompra-modal-body { font-size: 14px; line-height: 1.55; color: #0F1A28; }
/* La plantilla de términos viene del CMS de VENOM con font-family/<font> inline (tipografías
   mezcladas). Forzamos la fuente del sitio en todos los descendientes, ganándole a los inline. */
.nx-tucompra-modal-body, .nx-tucompra-modal-body * { font-family: inherit !important; }

/* Error states */
.nx-tucompra-input.is-error, .nx-tucompra-select.is-error, .nx-tucompra-card.is-error { border-color: #c44; }

.nx-tucompra-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Cart vacío */
.nx-tucompra-empty {
    background: #fff;
    border-radius: 20px;
    padding: 64px 32px;
    text-align: center;
    box-shadow:
        0 2px 1px -1px rgba(15, 26, 40, 0.04),
        0 4px 3px -2px rgba(15, 26, 40, 0.03),
        0 12px 8px -4px rgba(15, 26, 40, 0.08);
    max-width: 560px;
    margin: 0 auto;
}
.nx-tucompra-empty-icon { color: #898EF2; margin: 0 auto 20px; }
.nx-tucompra-empty-title { font-size: 22px; font-weight: 700; color: #0F1A28; margin: 0 0 8px; }
.nx-tucompra-empty-msg { font-size: 15px; color: #506680; line-height: 1.5; margin: 0 auto 24px; max-width: 420px; }
.nx-tucompra-empty-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Link "Buscar otro dominio" — sutil dentro del card dominios */
.nx-tucompra-add-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: #5B61E8;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 0;
}
.nx-tucompra-add-more:hover { text-decoration: underline; }
.nx-tucompra-add-more span { font-size: 18px; line-height: 1; }

/* Upsell banner — invita a agregar plan en Caso A */
.nx-tucompra-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(250, 255, 69, 0.25) 0%, rgba(194, 249, 198, 0.25) 50%, rgba(137, 142, 242, 0.25) 100%);
    border: 1px solid rgba(91, 97, 232, 0.18);
    color: #0F1A28;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.nx-tucompra-upsell:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 26, 40, 0.08);
}
.nx-tucompra-upsell-text { display: flex; flex-direction: column; gap: 2px; }
.nx-tucompra-upsell-text strong { font-size: 15px; font-weight: 700; color: #0F1A28; }
.nx-tucompra-upsell-text span { font-size: 13px; color: #506680; }
.nx-tucompra-upsell-arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: #5B61E8;
    transition: transform .15s;
}
.nx-tucompra-upsell:hover .nx-tucompra-upsell-arrow { transform: translateX(4px); }

/* Adicional tipo "grupo" — select con opciones excluyentes */
.nx-tucompra-grupo-wrap { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.nx-tucompra-grupo-label { font-size: 13px; color: #0F1A28; font-weight: 600; }
.nx-tucompra-grupo-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 10px 36px 10px 14px;
    border: 1px solid #0F1A28; border-radius: 10px;
    background: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230F1A28' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    font-size: 14px; color: #0F1A28; font-weight: 500;
    cursor: pointer;
    width: 100%; max-width: 320px;
}
.nx-tucompra-grupo-select:hover { border-color: #5B61E8; }
.nx-tucompra-grupo-select:focus { outline: 0; border-color: #5B61E8; box-shadow: 0 0 0 3px rgba(91, 97, 232, .15); }

/* Hint contextual debajo del título del adicional (ej. "Soporte Web Incluido") */
.nx-tucompra-adicional-hint {
    font-size: 12px;
    color: #5B61E8;
    font-weight: 600;
    margin: 2px 0 0;
}

/* Precio vacío cuando no hay opción seleccionada en un grupo */
.nx-tucompra-adicional-precio-empty {
    color: #aaa;
    font-weight: 600;
}

/* Botón Agregar deshabilitado */
.nx-btn-pill:disabled {
    background: #e6e8ec;
    color: #aaa;
    border-color: #e6e8ec;
    cursor: not-allowed;
}

/* DNS header con badge contextual */
.nx-tucompra-dns-header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    grid-column: 1 / -1; margin-bottom: 4px;
}
.nx-tucompra-dns-header .nx-tucompra-dns-title { margin: 0; }
.nx-tucompra-dns-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    background: #f0f2f5; color: #506680;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.nx-tucompra-dns-help {
    grid-column: 1 / -1;
    margin: 0 0 8px;
    font-size: 13px; color: #506680; line-height: 1.4;
}
.nx-tucompra-dns.is-readonly .nx-tucompra-dns-help {
    color: #506680;
    font-style: italic;
}

/* === Hero compacto para pasos del flow (reemplaza nx-dominios-hero en /compra/*) === */
.nx-compra-paso-hero {
    background: #0F1A28;
    color: #fff;
    padding: 40px 0 48px;
    text-align: center;
}
.nx-compra-paso-title {
    color: #fff;
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0;
}

/* Título del paso en el contenido (fondo claro), bajo "Volver a resultados". */
.nx-compra-hosting-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #06162b;
    margin: 16px 0 8px;
}

/* Toggle de período (estilo Webhosting) centrado, con aire antes de los planes. */
.nx-compra-main .nx-wh-periodo {
    display: flex;
    width: fit-content;
    margin: 8px auto 40px;
}

/* === Tabs categoría con icono (Emprendedores / Empresas / WordPress / Reseller) === */
.nx-plan-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nx-plan-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.85;
}
.nx-plan-tab.is-active .nx-plan-tab-icon { opacity: 1; }

/* === "Continuar sin hosting" como botón secundario visible === */
.nx-compra-sin-hosting-wrap {
    text-align: center;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.nx-compra-sin-hosting-help {
    font-size: 0.95rem;
    color: #506680;
    margin: 0;
}
.nx-btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1.5px solid #0F1A28;
    background: transparent;
    color: #0F1A28;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: padding 0.18s ease, border-bottom-width 0.18s ease;
}
/* Efecto Figma — outline variant: border-bottom engrosa + inset shadow desde abajo.
   La fuente del inset es navy (el mismo color del border) para coherencia con outline-dark. */
.nx-btn-outline-dark:hover {
    background: transparent;
    color: #0F1A28;
    box-shadow: inset 0 -4px 0 0 rgba(15, 26, 40, 0.35);
    border-bottom-width: 2.5px;
    padding-top: 10px;
    padding-bottom: 14px;
}
.nx-btn-outline-dark svg { transition: transform .15s; }
.nx-btn-outline-dark:hover svg { transform: translateX(2px); }

/* Card dominio lateral — formato limpio con precio principal + nota renovación + promo */
.nx-dominio-card-precio {
    font-size: 14px;
    color: #0F1A28;
    line-height: 1.3;
}
.nx-dominio-card-precio strong { font-size: 15px; }
.nx-dominio-card-precio-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.nx-dominio-card-precio-promo {
    font-size: 12px;
    color: #5B61E8;
    margin-top: 4px;
    font-weight: 500;
}
.nx-dominio-card-precio-promo strong { font-weight: 700; }

/* Resumen sidebar — precio + período en stack a la derecha (matches cards de izquierda) */
.nx-tucompra-resumen-item-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
}
.nx-tucompra-resumen-item-precio {
    font-size: 14px;
    font-weight: 600;
    color: #0F1A28;
    white-space: nowrap;
}
.nx-tucompra-resumen-item-periodo {
    font-size: 12px;
    color: #506680;
    line-height: 1.2;
}

/* ─── Pago placeholder (C.3a — Próximamente) ─── */
.nx-pago-section { padding: 96px 0; }
.nx-pago-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(15, 26, 40, .08);
    border-radius: 16px;
    padding: 56px 48px;
    text-align: center;
}
.nx-pago-icon {
    width: 88px; height: 88px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F6FD60 0%, #898EF2 100%);
    display: flex; align-items: center; justify-content: center;
    color: #0F1A28;
}
.nx-pago-title { font-size: 1.75rem; margin: 0 0 12px; color: #0F1A28; }
.nx-pago-message { color: #4C5B6F; font-size: 1rem; line-height: 1.5; margin: 0 0 32px; }
.nx-pago-message a { color: #5B61E8; text-decoration: none; font-weight: 600; }
.nx-pago-message a:hover { text-decoration: underline; }
.nx-pago-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ─── Forma de pago (/compra/pago) — iteración 2 diseño ─── */
.nx-pago-vacio { padding: 24px 0; color: #506680; }
.nx-pago-vacio a, .nx-pago-editar, .nx-pago-volver a { color: #5B61E8; }
.nx-pago-error-card { color: #c0392b; border-color: #f0c5c0 !important; background: #fdf3f2; }

/* Plan card (read-only) */
.nx-pago-plan-title { margin: 0; }
.nx-pago-plan-periodo { margin: 6px 0 0; font-size: 14px; color: #506680; }
.nx-pago-plan-precio { font-size: 16px; font-weight: 700; color: #0F1A28; white-space: nowrap; }
.nx-pago-plan-precio span { font-size: 12px; font-weight: 400; color: #506680; }
.nx-pago-editar { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; text-decoration: none; }
.nx-pago-editar:hover { text-decoration: underline; }

/* Datos de facturación */
.nx-pago-facturacion { background: #f5f6fb; border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.nx-pago-facturacion-line { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-pago-facturacion-line strong { font-size: 15px; font-weight: 600; color: #0F1A28; }
.nx-pago-facturacion-line span { font-size: 13px; color: #708098; }

/* Método de pago: grid de cards seleccionables */
.nx-pago-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .nx-pago-metodos { grid-template-columns: 1fr; } }
.nx-pago-metodo { display: block; cursor: pointer; position: relative; }
.nx-pago-metodo input { position: absolute; opacity: 0; width: 0; height: 0; }
.nx-pago-metodo-card {
    display: flex; flex-direction: column; gap: 14px; min-height: 128px; height: 100%;
    border: 1.5px solid #e6e8ec; border-radius: 14px; padding: 16px 18px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.nx-pago-metodo:hover .nx-pago-metodo-card { border-color: #c4c7f4; }
.nx-pago-metodo input:checked + .nx-pago-metodo-card { border-color: #5B61E8; box-shadow: inset 0 0 0 1px #5B61E8; }
.nx-pago-metodo input:focus-visible + .nx-pago-metodo-card { outline: 2px solid #898EF2; outline-offset: 2px; }
.nx-pago-metodo-head { display: flex; gap: 10px; align-items: flex-start; }
.nx-pago-metodo-radio {
    flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
    border: 2px solid #c2c8d2; background: #fff; transition: border-color .15s, background .15s;
}
.nx-pago-metodo input:checked + .nx-pago-metodo-card .nx-pago-metodo-radio {
    border-color: #5B61E8; background: #5B61E8; box-shadow: inset 0 0 0 3px #fff;
}
.nx-pago-metodo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nx-pago-metodo-label { font-size: 15px; font-weight: 600; color: #0F1A28; }
.nx-pago-metodo-sub { font-size: 13px; color: #708098; line-height: 17px; }
.nx-pago-metodo-logo { margin-top: auto; display: flex; align-items: center; min-height: 56px; }
.nx-pago-metodo-logo img { max-height: 56px; max-width: 130px; width: auto; object-fit: contain; }

/* Código promocional dentro de su card */
.nx-pago-codigo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.nx-pago-codigo .nx-tucompra-input { flex: 1 1 140px; }
.nx-pago-codigo-btn {
    flex: 0 0 auto; border: 1px solid #5B61E8; background: #fff; color: #5B61E8;
    border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.nx-pago-codigo-btn:hover { background: #f3f3ff; }
.nx-pago-codigo-msg { flex: 1 0 100%; font-size: 13px; margin: 0; }

/* Volver bajo el botón Pagar */
.nx-pago-volver { margin: 12px 0 0; text-align: center; font-size: 13px; }
.nx-pago-volver a { text-decoration: none; }
.nx-pago-volver a:hover { text-decoration: underline; }

/* Dominio gratis .nac.cl (plan flexible) — #7 */
.nx-tucompra-dom-gratis { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.nx-tucompra-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #0F1A28; cursor: pointer; }
.nx-tucompra-radio input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: #5B61E8; cursor: pointer; }
.nx-tucompra-dom-inputrow { display: flex; align-items: center; gap: 8px; }
.nx-tucompra-dom-inputrow .nx-tucompra-input { flex: 1 1 auto; }
/* Botón "Verificar dominio": botón real (antes usaba el pill diminuto .principal-toggle). */
.nx-tucompra-dom-verificar {
    margin-top: 12px;
    display: inline-block;
    background: #212e3f; color: #fff; border: 0;
    border-radius: 8px; padding: 10px 22px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
.nx-tucompra-dom-verificar:hover { background: #0f1a28; }
.nx-tucompra-dom-verificar:disabled { opacity: .6; cursor: default; }
/* Separar el resultado (dominio/estado/precio) del botón "Verificar dominio". */
.nx-tucompra-dom-resultado { margin-top: 18px; }
.nx-tucompra-dom-suffix { font-weight: 600; color: #0F1A28; white-space: nowrap; }

/* =======================================================================
   Dirección del cliente en /compra/pago (card en "Datos de facturación")
   + modal de edición. El markup usa .nx-modal-* / .nx-pago-dir-* (Grupo B).
   .nx-btn-primary viene de site.css; .nx-tucompra-select ya existe (L469).
   ======================================================================= */

/* --- Dirección dentro de Datos de facturación --- */
.nx-pago-dir-sep { height:1px; background:#e3e6ec; margin:14px 0; }
.nx-pago-dir-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.nx-pago-dir-label { font-size:12px; color:#708098; text-transform:uppercase; letter-spacing:.04em; }
.nx-pago-dir-edit { font-size:13px; font-weight:600; color:var(--nx-primary,#2563eb); cursor:pointer; text-decoration:none; }
.nx-pago-dir-val { font-size:14.5px; color:#0F1A28; margin-top:4px; line-height:1.45; }
.nx-pago-dir-val .l2 { color:#708098; font-size:13.5px; }
.nx-pago-dir-missing { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.nx-pago-dir-msg { font-size:13.5px; color:#9a3412; }
.nx-pago-dir-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#f59e0b; margin-right:7px; vertical-align:middle; }
.nx-pago-dir-add { background:var(--nx-primary,#2563eb); color:#fff; border:none; border-radius:9px; padding:9px 16px; font-weight:700; font-size:13.5px; cursor:pointer; }
.nx-pago-dir-hint { font-size:12px; color:#9a3412; text-align:center; margin-top:10px; }

/* --- Modal dirección --- */
.nx-modal[hidden] { display:none; }
.nx-modal { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.nx-modal-backdrop { position:absolute; inset:0; background:rgba(15,26,40,.5); }
.nx-modal-panel { position:relative; background:#fff; border-radius:18px; width:100%; max-width:440px; padding:26px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.nx-modal-title { font-size:19px; margin:0 0 4px; color:#0F1A28; }
.nx-modal-help { font-size:13px; color:#708098; margin:0 0 18px; }
.nx-modal-field { margin-bottom:14px; }
.nx-modal-field label { display:block; font-size:13px; font-weight:600; margin:0 0 6px; color:#33404f; }
.nx-modal-field .nx-req { color:#c2410c; }
.nx-modal-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.nx-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
/* Botones del modal. Se ESCOPAN a .nx-modal-actions para no pisar el
   .nx-btn-primary global (marca Figma amarilla en site.css). El markup del
   modal usa .nx-btn-primary/.nx-btn-ghost sueltos (sin .nx-btn base). */
.nx-modal-actions .nx-btn-ghost { background:#fff; border:1px solid #e6e8ec; color:#33404f; border-radius:10px; padding:11px 20px; font-size:14px; font-weight:700; cursor:pointer; }
.nx-modal-actions .nx-btn-primary { background:var(--nx-primary,#2563eb); color:#fff; border:none; border-radius:10px; padding:11px 20px; font-size:14px; font-weight:700; cursor:pointer; }
.nx-modal-actions .nx-btn-primary:disabled { opacity:.6; cursor:default; }
@media (max-width:480px){ .nx-modal-grid2 { grid-template-columns:1fr; } }