/* ─────────────────────────────────────────────────────────────────────────
   checkout-public.css — flujo de compra del INVITADO (orderbutton) sobre el
   shell de MARKETING (layout_public_nv). Solo se carga en el branch invitado
   de mod_orderbutton_index.html.twig (`{% if not client %}`).

   Por qué existe: el contenido del orderbutton (config de producto + paso de
   dominio + carrito) usa clases Estación `.nvx-*` cuyo BASE (nvx-wrap/hero/
   lcard/btn/tabs/inp/alert/badge/... + tokens `--nvx-*`) vive en nv-estacion.css,
   que SOLO carga layout_default (cliente). Las hojas por-página que sí cargan
   para el invitado (custom-nv-checkout.css, custom-nv-order.css, domain-search.css)
   consumen esos tokens y esas primitivas → sin ellas el invitado vería el
   markup sin estilo.

   Este archivo NO reescribe la lógica ni toca ids/name/data-* (contrato JS +
   money-path intactos): solo (1) define los tokens `--nvx-*` mapeados a la
   paleta marketing (styles.css: --color-navy, --color-cyan, --color-gray-N,
   --radius-flat), (2) recrea las primitivas Estación que faltan, y (3) aporta
   los shims de utilidades Bootstrap/Tabler que el marketing layout no trae.
   Como solo carga en esta página, los tokens en :root no filtran a otras vistas.

   ponytail: primitivas copiadas de nv-estacion.css (misma firma de tokens), no
   una segunda librería — reusar el diseño existente era más corto que inventar
   uno. Si el invitado gana más páginas nvx-*, promover a un CSS público común.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Tokens Estación mapeados a la paleta marketing ──────────────────── */
:root {
   --nvx-navy: var(--color-navy);
   --nvx-navy-900: #0a1628;
   --nvx-navy-800: #17304d;
   --nvx-cyan: var(--color-cyan);
   --nvx-cyan-bright: var(--color-cyan-light);
   --nvx-amber: var(--color-amber);
   --nvx-amber-bright: var(--color-amber-light);

   --nvx-surface: #ffffff;
   --nvx-surface-2: var(--color-gray-50);
   --nvx-ink: #12233b;
   --nvx-ink-soft: var(--color-gray-700);
   --nvx-muted: var(--color-gray-500);
   --nvx-line: var(--color-gray-200);
   --nvx-line-strong: var(--color-gray-400);

   --nvx-accent: var(--color-cyan);
   --nvx-accent-ink: #0e6e86;
   --nvx-accent-soft: #e0f2f7;
   --nvx-good: #059669;   --nvx-good-soft: #e3f4ec;  --nvx-good-ink: #047857;
   --nvx-warn: var(--color-amber); --nvx-warn-soft: #fbeedb; --nvx-warn-ink: #92400e;
   --nvx-crit: #dc2626;   --nvx-crit-soft: #fbe6e6;  --nvx-crit-ink: #b91c1c;
   --nvx-info: var(--color-cyan);  --nvx-info-soft: #e0f2f7;

   /* Tokens familia --nv-* que usa nv-cart-drawer.css (definidos en _brand-shared/
      nv-modern.css, que NO cargan en el layout público) → sin ellos el drawer del
      carrito quedaba sin fondo (transparente sobre backdrop oscuro). Valores light. */
   --nv-card-bg: #ffffff;
   --nv-navy-ink: var(--color-navy);
   --nv-text-muted: var(--color-gray-500, #6B7280);
   --nv-border-soft: var(--color-gray-100, #F3F4F6);
   --nv-page-bg: var(--color-gray-50, #F9FAFB);

   /* Radios marketing: contenedor recto (flat), control redondeado. */
   --nvx-r-surface: var(--radius-flat);
   --nvx-r-control: var(--radius-control);
   --nvx-r-data: var(--radius-flat);
   --nvx-r-pill: var(--radius-pill);

   --nvx-shadow: 0 1px 2px rgba(18,35,59,.05), 0 6px 16px -10px rgba(18,35,59,.16);
   --nvx-shadow-hover: 0 2px 4px rgba(18,35,59,.06), 0 14px 30px -12px rgba(18,35,59,.22);

   /* Estados de las tarjetas seleccionables (período/complemento/despliegue),
      referenciados una sola vez desde la sección 5 — evita magic numbers
      repetidos en cada bloque de estado. */
   --nv-cfg-shadow-hover: 0 8px 24px rgba(0,0,0,.08);
   --nv-cfg-shadow-selected: 0 10px 26px -14px rgba(8,145,178,.55);

   --nvx-display: var(--font-heading);
   --nvx-body: var(--font-primary);
   --nvx-mono: var(--font-mono);

   /* Easings usados por custom-nv-checkout.css. */
   --nv-ease-base: cubic-bezier(.4,0,.2,1);
   --nv-ease-out: cubic-bezier(.16,1,.3,1);
}

.nvx-hidden { display: none !important; }

/* ── 1b. Header SÓLIDO siempre en el orderbutton invitado ──────────────────
   El header marketing es transparente por defecto con logo/nav BLANCOS (asume
   hero oscuro detrás, como en la home). El orderbutton no tiene hero oscuro
   full-bleed → el header quedaba invisible hasta hacer scroll (>100px activa
   .header-scrolled). Este CSS carga solo en el guest orderbutton y DESPUÉS de
   styles.css, así que forzamos el estado sólido desde el inicio (logo/nav oscuros
   visibles sin scroll). No afecta a la home ni al cliente. */
.header { background: rgba(255,255,255,.98); backdrop-filter: blur(10px); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.header:not(.header-scrolled) .nav-link { color: var(--color-gray-700, #374151); }
.header:not(.header-scrolled) .nav-link:hover,
.header:not(.header-scrolled) .nav-link.active { color: var(--color-cyan, #0891B2); }
.header:not(.header-scrolled) .logo img { filter: none; }
.header:not(.header-scrolled) .mobile-menu-btn span { background: var(--color-navy, #1E3A5F); }

/* El cart-drawer debe quedar sobre el cookie-banner marketing (z-index 9999),
   que en primera visita taparía el footer del drawer ("Ir a pagar"). */
.nvx-cart-drawer { z-index: 10000; }

/* ── 2. Primitivas base (recreadas de nv-estacion.css) ──────────────────── */
.nvx-wrap {
   /* El header marketing es position:fixed height:80px → damos clearance arriba
      (las páginas con .hero cósmico lo absorben en su propio padding; aquí el
      hero es la banda compacta .nvx-hero y no lo trae). */
   max-width: 1200px; margin: 0 auto; padding: calc(80px + 24px) clamp(16px,3vw,26px) 56px;
   display: flex; flex-direction: column; gap: 16px;
   font-family: var(--nvx-body); color: var(--nvx-ink);
}
/* Variante para cuando el .hero cósmico (marketing, full-bleed) precede a
   .nvx-wrap fuera de este contenedor: el hero YA absorbe el clearance del
   header fijo en su propio padding-top (130px), así que aquí basta un
   respiro normal — sin duplicar los 80px del header. */
.nvx-wrap--flush { padding-top: 32px; }

.nvx-sectitle {
   display: flex; align-items: center; gap: 10px; margin: 6px 0 2px;
   font-family: var(--nvx-display); font-size: 15px; font-weight: 700; color: var(--nvx-ink);
}

/* Hero navy (idéntico al de /order y al hero cósmico del marketing). */
.nvx-hero {
   position: relative; overflow: visible;
   background: linear-gradient(135deg,#0a1628 0%, var(--color-navy) 60%, #0a1f3d 100%);
   color: #eaf1ff; border-radius: var(--nvx-r-surface);
   padding: 24px 26px; display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.nvx-hero::before {
   content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; border-radius: inherit;
   background-image: linear-gradient(rgba(8,145,178,.13) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(8,145,178,.13) 1px,transparent 1px);
   background-size: 28px 28px;
   -webkit-mask-image: linear-gradient(120deg,#000,transparent 70%);
           mask-image: linear-gradient(120deg,#000,transparent 70%);
}
.nvx-hero__text { position: relative; z-index: 1; min-width: 0; }
.nvx-hero__pre {
   font-family: var(--nvx-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
   text-transform: uppercase; color: #7fd9ea; margin-bottom: 6px;
}
.nvx-hero__title {
   margin: 0 0 4px; font-family: var(--nvx-display); font-size: clamp(24px,2.6vw,30px);
   font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: #eaf1ff;
}
.nvx-hero__sub { margin: 0; font-size: 14px; line-height: 1.45; color: #c0d2ec; }
.nvx-hero__sub strong { color: #fff; }
.nvx-hero__side { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }

/* Pill de estado (redondo). */
.nvx-pill {
   display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
   font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: var(--nvx-r-pill);
   background: var(--nvx-accent-soft); color: var(--nvx-accent-ink);
}

/* Cards. Borde nítido gris-200 + sombra sutil de lift (look /order), no el
   --nvx-shadow genérico de Estación — la única definición de .nvx-lcard de
   este archivo (antes se redeclaraba una 2ª vez más abajo con estos mismos
   valores; consolidado 2026-07-26). */
.nvx-lcard {
   background: var(--nvx-surface); border: 1px solid var(--color-gray-200);
   border-radius: var(--nvx-r-surface);
   box-shadow: 0 1px 2px rgba(18,35,59,.04), 0 12px 30px -20px rgba(18,35,59,.22);
   overflow: visible;
}
.nvx-lcard--pad { padding: 16px; }

/* Alertas. */
.nvx-alert {
   display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px;
   background: var(--nvx-surface); border: 1px solid var(--nvx-line);
   border-left: 3px solid var(--nvx-muted); border-radius: var(--nvx-r-surface); box-shadow: var(--nvx-shadow);
}
.nvx-alert--danger { border-left-color: var(--nvx-crit); }
.nvx-alert--warning { border-left-color: var(--nvx-warn); }
.nvx-alert--info { border-left-color: var(--nvx-info); }
.nvx-alert--success { border-left-color: var(--nvx-good); }
.nvx-alert__ico {
   width: 34px; height: 34px; border-radius: var(--nvx-r-data); flex: none;
   display: grid; place-items: center; background: var(--nvx-surface-2); color: var(--nvx-muted);
}
.nvx-alert__ico svg { width: 19px; height: 19px; }
.nvx-alert--danger .nvx-alert__ico { background: var(--nvx-crit-soft); color: var(--nvx-crit); }
.nvx-alert--warning .nvx-alert__ico { background: var(--nvx-warn-soft); color: var(--nvx-warn); }
.nvx-alert--info .nvx-alert__ico { background: var(--nvx-info-soft); color: var(--nvx-accent-ink); }
.nvx-alert--success .nvx-alert__ico { background: var(--nvx-good-soft); color: var(--nvx-good); }
.nvx-alert__body { flex: 1; min-width: 0; }
.nvx-alert__body h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--nvx-ink); }
.nvx-alert__body p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--nvx-muted); }
.nvx-alert__body p strong { color: var(--nvx-ink); }
.nvx-alert__action { margin-top: 10px; }

/* Icono cuadrado de fila (deployment options). */
.nvx-row__ico {
   width: 32px; height: 32px; border-radius: var(--nvx-r-data); flex: none;
   display: grid; place-items: center; background: var(--nvx-surface-2); color: var(--nvx-muted);
}
.nvx-row__ico svg { width: 17px; height: 17px; }
.nvx-row__ico--ok { background: var(--nvx-good-soft); color: var(--nvx-good); }

/* Badges (chip de dato). */
.nvx-badge {
   display: inline-flex; align-items: center; gap: 5px;
   font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--nvx-r-pill);
   background: var(--nvx-surface-2); color: var(--nvx-muted); white-space: nowrap;
}
.nvx-badge svg { width: 13px; height: 13px; }
.nvx-badge--ok { color: var(--nvx-good-ink); background: var(--nvx-good-soft); }
.nvx-badge--warn { color: var(--nvx-warn-ink); background: var(--nvx-warn-soft); }
.nvx-badge--info { color: var(--nvx-accent-ink); background: var(--nvx-info-soft); }

/* Botones. */
.nvx-btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
   font-family: var(--nvx-body); font-size: 13px; font-weight: 600; line-height: 1;
   padding: 10px 16px; border-radius: var(--nvx-r-control); border: 1px solid transparent;
   text-decoration: none; transition: filter .12s, background .12s, border-color .12s;
}
.nvx-btn svg { width: 16px; height: 16px; }
.nvx-btn--sm { padding: 6px 11px; font-size: 12px; }
.nvx-btn--sm svg { width: 14px; height: 14px; }
.nvx-btn--primary { background: var(--color-cyan); }
.nvx-btn--primary:hover { filter: brightness(1.08); }
.nvx-btn--ghost { background: var(--nvx-surface); border-color: var(--nvx-line-strong); }
.nvx-btn--ghost:hover { background: var(--nvx-surface-2); border-color: var(--nvx-accent); }
/* Color de texto blindado contra el a:hover{color:navy} del marketing (los
   .nvx-btn suelen ser <a>). Especificidad :hover ⇒ vence a `a:hover`. */
.nvx-btn--primary, .nvx-btn--primary:hover, .nvx-btn--primary:focus,
.nvx-btn--navy, .nvx-btn--navy:hover { color: #fff; }
.nvx-btn--ghost, .nvx-btn--ghost:hover, .nvx-btn--ghost:focus { color: var(--nvx-ink); }
.nvx-btn:focus-visible { outline: 2px solid var(--nvx-accent); outline-offset: 2px; }
.nvx-btn:disabled, .nvx-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Tabs del paso de dominio. */
.nvx-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 0; border-bottom: 1px solid var(--nvx-line); }
.nvx-tab {
   padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--nvx-muted);
   text-decoration: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
   background: none; cursor: pointer; white-space: nowrap;
}
.nvx-tab.is-on, .nvx-tab.active { color: var(--nvx-accent-ink); border-bottom-color: var(--nvx-cyan); }
.nvx-tab:focus-visible { outline: 2px solid var(--nvx-accent); outline-offset: 2px; }

/* Buscador (paso dominio: registrar nuevo). */
.nvx-search {
   flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
   background: var(--nvx-surface); border: 1px solid var(--nvx-line-strong); border-radius: var(--nvx-r-control);
}
.nvx-search svg { width: 15px; height: 15px; color: var(--nvx-muted); flex: none; }
.nvx-search input { border: 0; background: transparent; outline: none; padding: 10px 0; font-size: 14px; color: var(--nvx-ink); width: 100%; font-family: inherit; }

/* Campos de formulario. */
.nvx-fsec__title { font-family: var(--nvx-display); font-size: 16px; font-weight: 700; color: var(--nvx-ink); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.nvx-fsec__b { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nvx-fg { display: flex; flex-direction: column; gap: 5px; }
.nvx-fg--full { grid-column: 1 / -1; }
.nvx-fg > label { font-size: 13px; font-weight: 600; color: var(--nvx-ink-soft); }
.nvx-fg .req, .req { color: var(--nvx-crit); }
.nvx-inp {
   padding: 10px 12px; background: var(--nvx-surface); border: 1px solid var(--nvx-line-strong);
   border-radius: var(--nvx-r-control); font-size: 14px; color: var(--nvx-ink); font-family: inherit; width: 100%; outline: none;
}
.nvx-inp:focus { border-color: var(--nvx-cyan); box-shadow: 0 0 0 3px var(--nvx-accent-soft); }
.nvx-hint { font-size: 12px; line-height: 1.4; color: var(--nvx-muted); }
.nvx-cbx { width: 16px; height: 16px; cursor: pointer; accent-color: var(--nvx-cyan); vertical-align: middle; }

/* Estado vacío + grid 2col. */
.nvx-empty-box { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 40px 20px; color: var(--nvx-muted); }
.nvx-empty-box svg { width: 30px; height: 30px; opacity: .55; margin-bottom: 4px; }
.nvx-empty-box b { color: var(--nvx-ink); font-size: 16px; }
.nvx-empty-box span { font-size: 13px; max-width: 420px; }
.nvx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .nvx-grid2 { grid-template-columns: 1fr; } .nvx-fsec__b { grid-template-columns: 1fr; } .nvx-hero { flex-direction: column; align-items: flex-start; } }

/* ── 3. Deployment selector + form-check (reemplazo de Tabler, ausente en marketing) ──
   Sólo estructura (posicionamiento del radio nativo / layout base) — el estado
   visual (borde reposo/hover/seleccionado) vive TODO junto en la sección 5,
   para no repetir el mismo selector en dos sitios que se pisan entre sí. */
.form-selectgroup-item { display: block; height: 100%; margin: 0; cursor: pointer; }
.form-selectgroup-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.deployment-option, .form-selectgroup-label {
   display: flex; gap: 12px; align-items: flex-start; height: 100%;
}
.deployment-option strong { display: block; font-size: 14px; color: var(--nvx-ink); margin-bottom: 2px; }
.form-check { display: flex; }
.form-check-input { flex: none; accent-color: var(--nvx-cyan); }
.form-check-label { font-size: 13px; color: var(--nvx-ink-soft); }

/* ── 4. Shims de utilidades Bootstrap/Tabler usadas en el markup ────────── */
.row { display: flex; flex-wrap: wrap; }
.row.g-3 { gap: 1rem; }
.col-12 { flex: 1 1 100%; }
@media (min-width: 768px) { .col-md-6 { flex: 1 1 calc(50% - .5rem); max-width: calc(50% - .5rem); } }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-fill { flex: 1 1 auto; }
.flex-column { flex-direction: column; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.gap-2 { gap: .5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.me-1 { margin-right: .25rem; }
.me-2 { margin-right: .5rem; }
.ms-1 { margin-left: .25rem; }
.text-center { text-align: center; }
.text-muted { color: var(--nvx-muted) !important; }
.text-success { color: var(--nvx-good-ink) !important; }
.text-danger { color: var(--nvx-crit-ink) !important; }

/* ── 5. Cuerpo de configuración (order=N) — piel marketing, consolidada ──
   REBUILD 2026-07-26: antes el estado visual de cada tarjeta seleccionable
   vivía repartido en 3 bloques (aquí + un bloque "REBUILD" pegado al final)
   que declaraban el MISMO selector con la MISMA especificidad — quien
   cargaba último ganaba una propiedad sí y otra no (ej.: el `border` shorthand
   de un bloque posterior pisaba el `border-color` en cyan de un bloque
   anterior). Resultado real en vivo: la opción SELECCIONADA de "¿Cómo te
   gustaría empezar?" quedaba con borde gris (no cyan) + un halo de box-shadow
   competido, y la NO seleccionada con un borde gris tan sutil que al lado del
   halo se leía como "sin borde". Ahora hay UNA sola definición por estado,
   compartida por período/complemento/despliegue, con la fórmula de
   .platform-hub-card / .nvo-plan (marketing/order-public.css): borde 1px
   gris-200 SIEMPRE presente en reposo, borde cyan + lift en hover, borde
   cyan + fondo cyan claro + sombra en seleccionado (sin lift, para no pelear
   con el hover al cambiar de radio/checkbox). ─────────────────────────── */

/* CTAs de página completa (pagar / agregar al carrito / iniciar sesión) con
   la proporción del .btn marketing; nvx-btn--sm y los botones inline (buscar
   dominio, tabs, quitar del carrito) quedan compactos, sin tocar. */
.nvx-cko-checkout-form .nvx-cko-pay-btn,
.nvx-cfg-summary .nvx-cfg-summary__cta,
.nvx-cko-auth__actions .nvx-btn,
.nvx-empty-box .nvx-btn {
   padding: .9rem 1.75rem;
   font-size: .95rem;
}

/* Encabezados de sección (Tu plan / Período / ¿Cómo te gustaría empezar? /
   Configuración de dominio / Instalación automática / Complementos) — mismo
   tratamiento Sora que el resto del marketing (antes: tamaño/peso de admin,
   se leía plano al lado del hero y las cards de /order). */
.nvx-cfg-section__title,
.nvx-fsec__title {
   font-family: var(--font-heading);
   font-size: 1.2rem;
   font-weight: 800;
   color: var(--color-navy);
   letter-spacing: -.01em;
}
.nvx-cfg-section__head { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.nvx-cfg-section__head .nvx-hint { margin: 0; }

/* "Tu plan" — specs como chips con icono en círculo (antes: texto suelto sin
   caja, la card se leía vacía comparada con sus hermanas). */
.nvx-cfg-specs { gap: .7rem 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.nvx-cfg-spec {
   padding: .85rem 1rem; background: var(--color-gray-50);
   border: 1px solid var(--color-gray-200); border-radius: var(--radius-flat);
}
.nvx-cfg-spec svg {
   width: 34px; height: 34px; padding: 9px; box-sizing: border-box;
   border-radius: 50%; background: var(--nvx-accent-soft); color: var(--color-cyan);
}
.nvx-cfg-spec strong { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--color-navy); }

/* La card del servicio (deploy/domain/instalación para hosting, buscador para
   dominio standalone) ya se auto-envuelve en sus propias .nvx-lcard — el
   <section class="nvx-cfg-section"> que la contiene en
   mod_orderbutton_product_configuration.html.twig sólo duplicaba el marco
   (caja dentro de caja: borde+sombra del wrapper alrededor de 2-4 cards que
   YA tienen su propio borde+sombra). display:contents la saca del flujo de
   caja sin tocar el template compartido con el cliente (guest-only, vía este
   archivo — el cliente sigue viendo el wrapper tal cual). */
.nvx-cfg-col-form > section.nvx-cfg-section:has([data-nv-svc-hosting-order]),
.nvx-cfg-col-form > section.nvx-cfg-section:has(#domain-search-transfer-form) {
   display: contents;
}
/* Mismo ritmo de padding que las cards hermanas (Tu plan/Período/Complementos)
   ahora que comparten columna directamente. Descendiente (no ">"): "Instalación
   Automática"/"Migración Asistida" anidan su .nvx-lcard--pad un nivel más adentro
   (#section-new-install/#section-migration-assisted), no como hijo directo.
   ".mb-3" excluye a propósito las 4 mini-cards de paso ("¿Cómo funciona...?"
   dentro de .nvx-grid2, sin mb-3) — esas deben quedarse compactas (16px). */
[data-nv-svc-hosting-order] .nvx-lcard.nvx-lcard--pad.mb-3 {
   padding: 1.5rem 1.75rem;
}

/* Tarjetas seleccionables: período, complemento, despliegue. Reposo → borde
   gris-200 SIEMPRE presente. Hover → borde cyan + lift. Seleccionado → borde
   cyan + fondo cyan claro + sombra. Selectores parent-scoped (2 clases o
   más) para ganar a custom-nv-checkout.css sin depender del orden de carga
   en <head> (mismo motivo que ya usaba el bloque REBUILD anterior). */
.nvx-cfg-periods .nvx-cfg-period,
.nvx-cfg-addons .nvx-cfg-addon,
[data-nv-svc-hosting-order] .deployment-option,
[data-nv-svc-hosting-order] .form-selectgroup-label {
   border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-flat);
   background: #fff;
   box-shadow: none;
   transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.nvx-cfg-periods .nvx-cfg-period:hover,
.nvx-cfg-addons .nvx-cfg-addon:hover,
[data-nv-svc-hosting-order] .deployment-option:hover,
[data-nv-svc-hosting-order] .form-selectgroup-label:hover {
   border-color: var(--color-cyan);
   box-shadow: var(--nv-cfg-shadow-hover);
   transform: translateY(-2px);
}
.nvx-cfg-periods .nvx-cfg-period.is-checked,
.nvx-cfg-addons .nvx-cfg-addon:has(.nvx-cfg-addon__cb:checked),
[data-nv-svc-hosting-order] .form-selectgroup-input:checked + .deployment-option,
[data-nv-svc-hosting-order] .form-selectgroup-input:checked + .form-selectgroup-label,
[data-nv-svc-hosting-order] .nv-svc-deploy-option--active {
   border-color: var(--color-cyan);
   background: var(--nvx-accent-soft);
   box-shadow: var(--nv-cfg-shadow-selected);
   transform: none;
}

/* Gateway de pago (checkout=1, mismo archivo guest) — reposo/hover igual al
   look ya vigente (sin cambios de comportamiento); el estado seleccionado lo
   sigue gobernando custom-nv-checkout.css (:has(__input:checked)), fuera del
   alcance de esta tarea, así que no se declara aquí para no competir con él. */
.nvx-cko-gateways__list .nvx-cko-gateway {
   border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-flat);
   transition: border-color .18s, box-shadow .18s, transform .18s;
}
.nvx-cko-gateways__list .nvx-cko-gateway:hover {
   border-color: var(--color-cyan);
   box-shadow: var(--nv-cfg-shadow-hover);
   transform: translateY(-2px);
}
.nvx-cko-item:hover { border-color: var(--color-cyan); }

/* Período de facturación → pricing cards (mismo lenguaje que .nvo-plan).
   auto-fit en vez de 2 columnas fijas: no rompe el grid si el producto tiene
   3+ períodos habilitados (mensual/trimestral/semestral/anual/bianual...). */
.nvx-cfg-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.nvx-cfg-periods .nvx-cfg-period {
   display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
   padding: 1.1rem 1.2rem; position: relative;
}
.nvx-cfg-periods .nvx-cfg-period input[type="radio"] {
   position: absolute; top: .95rem; right: .95rem; width: 1.15rem; height: 1.15rem;
   accent-color: var(--color-cyan); margin: 0;
}
.nvx-cfg-periods .nvx-cfg-period__label {
   order: 1; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
   text-transform: uppercase; color: var(--color-gray-500);
}
.nvx-cfg-periods .nvx-cfg-period__price {
   order: 2; font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800;
   color: var(--color-navy); letter-spacing: -.02em; line-height: 1.1;
}
.nvx-cfg-periods .nvx-cfg-period__badge {
   order: 3; margin-top: .15rem; background: var(--color-amber); color: #fff;
   font-weight: 700; font-size: .7rem; padding: .18rem .55rem; border-radius: 999px;
}

/* Complementos (bolsas) → checkbox más grande + precios en navy. */
.nvx-cfg-addons .nvx-cfg-addon__cb { width: 1.25rem; height: 1.25rem; }
.nvx-cfg-addons .nvx-cfg-addon__title { font-size: 1rem; }
.nvx-cfg-addons .nvx-cfg-addon__price-once,
.nvx-cfg-addons .nvx-cfg-addon__price-display { color: var(--color-navy); font-size: 1.02rem; }

/* ── Polish de 3 secciones del cuerpo (feedback usuario) ────────────────────
   1) Complementos: las descripciones de las bolsas son largas y repetitivas
      ("Vigencia 1 año... Horas no acumulables... Para sitios alojados...") →
      clamp a 2 líneas para que las cards queden compactas y escaneables. */
.nvx-cfg-addons .nvx-cfg-addon__desc {
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
   overflow: hidden;
}
/* 2) Términos autogestionable: la lista de responsabilidades salía como bullets
      de texto muted diminuto → filas limpias, legibles, con el icono alineado. */
.nv-self-managed-disclaimer ul {
   list-style: none; margin: .25rem 0 1rem; padding: 0; display: grid; gap: .55rem;
}
.nv-self-managed-disclaimer ul li {
   display: flex; gap: .55rem; align-items: flex-start;
   font-size: .87rem; line-height: 1.45; color: var(--nvx-ink-soft);
}
.nv-self-managed-disclaimer ul li svg { flex: none; margin-top: .15rem; }
/* El checkbox de aceptación como fila destacada. */
.nv-self-managed-disclaimer .form-check {
   display: flex; gap: .55rem; align-items: flex-start; padding: .8rem 1rem;
   background: var(--nvx-surface-2); border: 1px solid var(--nvx-line);
   border-radius: var(--radius-flat); font-size: .87rem; color: var(--nvx-ink);
}