/* ============================================================
   site.css — Estilos del proyecto /new/
   Iteración 0: reset + tipografía + layout primitives + chrome
   ============================================================ */

/* ─── 1. RESET MÍNIMO ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button, input, select, textarea {
  font: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
img, svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* ─── 2. TIPOGRAFÍA ──────────────────────────────────────── */
/* Variable fonts: 1 archivo cubre weights 100-900 via font-weight range */
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/albert-sans-variable.woff2') format('woff2-variations'),
       url('../fonts/albert-sans-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2-variations'),
       url('../fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.nx-body {
  font-family: 'Albert Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--colors-text-text-primary, #0f1a28);
  background: var(--colors-background-bg-primary, #ffffff);
  -webkit-font-smoothing: antialiased;
}

h1, .nx-h1 { font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; letter-spacing: -0.02em; }
h2, .nx-h2 { font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; }
h3, .nx-h3 { font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1.3; }

/* ─── 3. LAYOUT PRIMITIVES ───────────────────────────────── */
.nx-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
.nx-main {
  min-height: calc(100vh - 80px - 702px); /* navbar 80 + footer 702 */
}

/* ─── 4. CHROME — Navbar + Footer (Iter 0 placeholder) ──── */
.nx-header {
  background: var(--colors-background-bg-brand-section, #0f1a28);
  color: #ffffff;
  height: 80px;
  display: flex;
  align-items: center;
}
.nx-header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nx-logo {
  display: block;
  height: 32px;
  width: auto;
}
.nx-nav-desktop {
  display: flex;
  gap: 24px;
  font-size: 0.95rem;
  font-weight: 500;
}
.nx-nav-desktop a:hover { opacity: 0.8; }

.nx-footer {
  background: var(--colors-background-bg-brand-section, #0f1a28);
  color: #ffffff;
  padding: 64px 0 24px;
}
.nx-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.nx-footer-col h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--colors-text-text-lilac, #898EF2);
}
.nx-footer-col ul li {
  padding: 4px 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.nx-footer-col ul li a:hover { opacity: 0.7; }

/* Footer brand column (tagline + contact) */
.nx-footer-tagline {
  margin: 16px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}
.nx-footer-contact {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.nx-footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #ffffff;
}
.nx-footer-contact li svg { flex: 0 0 16px; }

.nx-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ─── 5. PAGES (Iter 0 placeholder de Home) ─────────────── */
.nx-placeholder {
  padding: 96px 16px;
  text-align: center;
}
.nx-placeholder h1 {
  margin-bottom: 16px;
}
.nx-placeholder p {
  color: var(--colors-text-text-secondary, #555);
  max-width: 600px;
  margin: 0 auto;
}

/* ─── 6. RESPONSIVE — breakpoint único 768px ─────────────── */
@media (max-width: 767px) {
  .nx-container { padding: 0 12px; }
  .nx-nav-desktop { display: none; }
  .nx-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .nx-footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   ITER 1 — Components + Home page styles
   ============================================================ */

/* ─── Buttons utility ─────────────────────────────────────── */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: padding 0.18s ease,
              border-bottom-width 0.18s ease,
              box-shadow 0.18s ease,
              background 0.18s ease,
              color 0.18s ease;
  text-decoration: none;
  border: 0;
}

/* Hover Figma-spec UNIVERSAL: el botón "se hunde" levemente — padding-top baja,
   padding-bottom sube, y aparece un thick edge en la base. Aplica a TODOS los
   .nx-btn (cualquier variante). Variantes con border (Secondary) overridean. */
.nx-btn:hover {
  padding-top: 10px;
  padding-bottom: 14px;
  box-shadow: inset 0 -4px 0 rgba(15, 26, 40, 0.18);
}

.nx-btn-primary {
  background: var(--colors-background-bg-brand-tertiary, #f6fd60);
  color: var(--colors-text-text-brand-primary, #0f1a28);
}
.nx-btn-primary:hover {
  /* Color exacto de Figma: lila #898ef2 (brand secondary) en el thick bottom */
  box-shadow: inset 0 -4px 0 #898ef2;
}

.nx-btn-secondary {
  background: transparent;
  color: var(--colors-text-text-brand-tertiary, #f6fd60);
  border: 1.5px solid var(--colors-text-text-brand-tertiary, #f6fd60);
}
.nx-btn-secondary:hover {
  /* Figma Secondary/Hover (verificado vía MCP 2026-06-01, node 51:620):
     el botón se RELLENA de navy #0f1a28, texto+borde amarillos, inner shadow
     amarillo en y=-4, border-bottom más grueso, padding shift. */
  background: #0f1a28;
  color: var(--colors-text-text-brand-tertiary, #f6fd60);
  box-shadow: inset 0 -4px 0 0 #f6fd60;
  border-bottom-width: 2.5px;
  padding-top: 10px;
  padding-bottom: 14px;
}

/* ─── Header con dropdowns ────────────────────────────────── */
.nx-header { position: relative; z-index: 100; }
.nx-nav-desktop { gap: 32px; position: relative; }
.nx-nav-item { position: relative; }
.nx-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.15s ease;
  cursor: pointer;
}
.nx-nav-item > a:hover,
.nx-nav-item.is-open > a {
  background: rgba(255, 255, 255, 0.08);
}
.nx-nav-item > a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 4px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}
.nx-nav-item.is-open > a::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.nx-nav-item.nx-no-dropdown > a::after { display: none; }

.nx-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #182334;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 100px rgba(196, 194, 250, 0.12);
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 200;
}
.nx-nav-item.is-open .nx-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nx-dropdown-mega {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  min-width: 760px;
}
.nx-dropdown-col h5 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--colors-text-text-brand-tertiary, #f6fd60);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nx-dropdown-col h5::after {
  content: '→';
  font-size: 1rem;
  opacity: 0.9;
}
.nx-dropdown-col ul li {
  padding: 8px 0;
  font-size: 0.95rem;
}
.nx-dropdown-col ul li a {
  display: block;
  font-weight: 500;
}
.nx-dropdown-col ul li a:hover { color: var(--colors-text-text-brand-tertiary, #f6fd60); }
.nx-dropdown-col ul li .nx-dropdown-desc {
  display: block;
  font-size: 0.8rem;
  opacity: 0.6;
  font-weight: 400;
  margin-top: 2px;
}

.nx-mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nx-mobile-toggle svg { width: 24px; height: 24px; color: #fff; }

/* Cluster mobile (carrito + hamburguesa): oculto en desktop, flex en mobile. */
.nx-mobile-cluster { display: none; }
.nx-mobile-cart {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nx-mobile-cart svg { width: 24px; height: 24px; color: #fff; }

.nx-header-actions { display: flex; gap: 12px; align-items: center; }
/* Acciones mobile (dentro del hamburguesa): ocultas en desktop y mientras el
   menú está cerrado. Solo se muestran via .nx-nav-desktop.is-open en mobile. */
.nx-nav-mobile-actions { display: none; }

/* ─── HOME — Hero (con dos patterns: top + bottom) ──────── */
.nx-home-hero {
  position: relative;
  background: var(--colors-background-bg-brand-section, #0f1a28);
  color: #ffffff;
  padding: 96px 0 112px;
  overflow: hidden;
}
.nx-home-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: url('../images/decoration/hero-curves.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.nx-home-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.nx-home-hero-content { max-width: 640px; }
.nx-home-hero-lia {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1;
  justify-self: center;
}

/* Gradient button para "Probar hosting flexible" en hero — Figma node 2691:105775.
   3 stops EXACTOS (yellow → teal → lila) + drop-shadow amarillo glow (shadow-brand-lg). */
.nx-btn-gradient {
  background: linear-gradient(90deg, #f6fd60 0%, #c2f9c6 50%, #898ef2 100%);
  color: #0f1a28;
  border: 1px solid #f6fd60;
  /* shadow-brand-lg de Figma: 3 drop-shadows en glow amarillo */
  filter: drop-shadow(0 2px 2px rgba(250, 255, 69, 0.08))
          drop-shadow(0 4px 6px rgba(250, 255, 69, 0.06))
          drop-shadow(0 12px 16px rgba(250, 255, 69, 0.14));
}
/* Hover: usa el efecto Figma .nx-btn:hover universal (navy 18% inset bottom).
   El gradient se mantiene; sobre el gradient el inset navy 18% queda más visible. */
.nx-home-hero-lia img.nx-lia-static {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  object-fit: contain;
}
.nx-home-hero-lia img.nx-lia-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: lia-orbit 18s linear infinite;
  z-index: 1;
}
@keyframes lia-orbit {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-lia-orbit, .nx-cta-lia .nx-lia-orbit { animation: none; }
}
.nx-home-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -2px;
}
.nx-home-hero .nx-hero-subtitle {
  font-size: 1.125rem;
  opacity: 0.85;
  margin-bottom: 32px;
  max-width: 540px;
}
.nx-home-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }

/* ─── HOME — Floating domain card (lavender) ──────────────── */
.nx-home-domain-overlap {
  position: relative;
  z-index: 5;
  margin-top: -80px;
  margin-bottom: -80px;
}
.nx-home-domain-card {
  background: #898EF2;
  border-radius: 32px;
  padding: 64px;
  max-width: 832px;
  margin: 0 auto;
  text-align: center;
  color: #06162B;
  box-shadow:
    0 3px 3px -1.5px rgba(15,26,40,0.04),
    0 8px 8px -4px rgba(15,26,40,0.03),
    0 20px 24px -4px rgba(15,26,40,0.08);
}
.nx-home-domain-card h3 {
  color: #06162B;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.72px;
  margin: 0 0 20px;
}
.nx-home-domain-card > p {
  color: #212E3F;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto 48px;
}
.nx-home-services { padding-top: 160px !important; }
@media (max-width: 767px) {
  .nx-home-domain-overlap { margin-top: -40px; margin-bottom: -40px; padding: 0 16px; }
  .nx-home-domain-card { padding: 32px 24px; border-radius: 24px; }
  .nx-home-domain-card h3 { font-size: 1.5rem; margin-bottom: 16px; }
  .nx-home-domain-card > p { font-size: 0.9375rem; margin-bottom: 32px; }
  .nx-home-services { padding-top: 120px !important; }
}

/* ─── domain_search_form component ─────────────────────────── */
.nx-domain-search {
  background: var(--colors-background-bg-primary, #ffffff);
  color: var(--colors-text-text-primary, #0f1a28);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  max-width: 640px;
}
.nx-domain-search h3 { font-size: 1.25rem; margin-bottom: 8px; }
.nx-domain-search p { font-size: 0.9rem; color: var(--colors-text-text-secondary, #555); margin-bottom: 16px; }
.nx-domain-search-bare { background: transparent; padding: 0; box-shadow: none; max-width: 720px; margin: 0 auto; }
.nx-domain-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 8px 8px 20px;
  border: 1px solid #0F1A28;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15,26,40,0.05);
  box-sizing: border-box;
}
.nx-domain-search-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4C5B6F;
  width: 20px;
  height: 20px;
}
.nx-domain-search-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #0F1A28;
  background: transparent;
  height: 48px;
}
.nx-domain-search-form input[type="text"]::placeholder { color: #4C5B6F; }
.nx-domain-search-form select {
  flex: 0 0 auto;
  width: 120px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 8px;
  padding-left: 8px;
  font-size: 16px;
  height: 48px;
  color: #0F1A28;
  border-left: 1px solid rgba(15,26,40,0.12);
  cursor: pointer;
}
.nx-domain-search-form button {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #f6fd60;
  color: #0F1A28;
  border: 1px solid #0F1A28;
  border-radius: 9999px;
  padding: 12px 18px;
  height: 48px;
  min-width: 96px;
  font-weight: 600;
  cursor: pointer;
  /* Efectos Figma "shadow-xs-skeuomorphic" (Search component 1033:7223):
     drop shadow externa + inner glow amarillo + inner halo lila — todo sutil. */
  box-shadow:
    0 1px 2px 4px rgba(15, 26, 40, 0.05),
    inset 0 -2px 0 0 rgba(250, 255, 69, 0.14),
    inset 0 0 0 1px rgba(127, 140, 247, 0.18);
  transition: box-shadow 0.18s ease, background 0.18s ease, padding 0.18s ease;
}
/* Hover: efecto Figma unificado — el texto "sube" via padding shift
   (top -2, bottom +2) + thick edge inferior navy del mismo color del border. */
.nx-domain-search-form button:hover {
  padding-top: 10px;
  padding-bottom: 14px;
  box-shadow: inset 0 -4px 0 0 #0f1a28;
}
/* Botón de búsqueda: texto en desktop, icono lupa en mobile (fiel a Figma).
   El icono se oculta en desktop. NO se toca el display del botón en desktop
   para preservar el hover (padding-shift que sube el texto + thick bottom);
   con display:flex + align-items:center el flex centraría el contenido y
   anularía ese padding-shift. */
.nx-domain-search-form button .nx-domain-search-btn-icon { display: none; }
/* Mobile: ocultar texto, mostrar lupa, botón circular. inline-flex SOLO acá
   para centrar la lupa. Esta media query va DESPUÉS de la regla base para
   ganar en orden de cascada. */
@media (max-width: 767px) {
  .nx-domain-search-form button .nx-domain-search-btn-text { display: none; }
  .nx-domain-search-form button .nx-domain-search-btn-icon { display: block; }
  .nx-domain-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 48px;
    padding-left: 0;
    padding-right: 0;
  }
  .nx-domain-search-form button:hover { padding-left: 0; padding-right: 0; }
}

/* ─── HOME — Services bento grid ─────────────────────────── */
.nx-home-services { padding: 96px 0; background: var(--colors-background-bg-secondary, #f6f8fb); }
.nx-home-services-header { text-align: center; margin-bottom: 48px; max-width: 720px; margin-left: auto; margin-right: auto; }
.nx-home-services-header h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 16px; }
.nx-home-services-header p { color: #354457; font-size: 1.125rem; }

.nx-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "card1 card1"
    "card2 card3"
    "card4 card4";
  gap: 32px;
}
.nx-bento-card-1 { grid-area: card1; aspect-ratio: 1216/502; }
.nx-bento-card-2 { grid-area: card2; aspect-ratio: 584/1004; }
.nx-bento-card-3 { grid-area: card3; aspect-ratio: 584/1004; }
.nx-bento-card-4 { grid-area: card4; aspect-ratio: 1216/502; }

.nx-bento-card {
  background: var(--colors-background-bg-primary, #ffffff);
  border-radius: 32px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nx-bento-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.1); }
.nx-bento-eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; }
.nx-bento-title { font-size: 1.75rem; font-weight: 700; margin: 16px 0 12px; max-width: 360px; line-height: 1.2; }
.nx-bento-desc { color: var(--colors-text-text-secondary, #555); font-size: 0.95rem; max-width: 360px; margin-bottom: 24px; }

/* ─── HOME — Testimonials (Figma speech bubbles + Lia) ────── */
.nx-home-testimonials {
  position: relative;
  background: #7B7AF7;
  color: #ffffff;
  padding: 96px 0 120px;
  overflow: hidden;
}
/* Pattern: curvas decorativas Figma (2691:105797) — full bleed cubre la sección */
.nx-home-testimonials-pattern {
  position: absolute;
  inset: 0;
  background-image: url('../images/decoration/testimonials-curves.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.nx-home-testimonials .nx-container { position: relative; z-index: 1; }
.nx-home-testimonials h2 {
  color: #ffffff;
  text-align: center;
  margin: 0 auto 64px;
  max-width: 720px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.nx-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 560px));
  grid-template-areas:
    "t1 t2"
    "t3 t3";
  justify-content: center;
  gap: 56px 48px;
  max-width: 1216px;
  margin: 0 auto;
  align-items: start;
}
.nx-testimonial-1 { grid-area: t1; }
.nx-testimonial-2 { grid-area: t2; }
.nx-testimonial-3 { grid-area: t3; justify-self: center; max-width: 560px; width: 100%; }
.nx-testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.nx-testimonial-bubble {
  position: relative;
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  width: 100%;
  /* drop-shadow (no box-shadow) para que la sombra siga la silueta del
     bubble + tail combinados, como en Figma (Effect shadow-2xl). */
  filter:
    drop-shadow(0 24px 24px rgba(15, 26, 40, 0.18))
    drop-shadow(0 4px 2px rgba(15, 26, 40, 0.04));
}
.nx-testimonial-tail {
  position: absolute;
  bottom: -32px;
  left: 8%;
  width: 50px;
  height: 66px;
  color: inherit;
  pointer-events: none;
  display: block;
  overflow: visible;
}
.nx-testimonial-bubble p {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
}
.nx-testimonial-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nx-testimonial-author cite {
  font-style: normal;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
}
.nx-testimonial-author .nx-testimonial-role {
  font-size: 1rem;
  line-height: 1.5;
}

/* Variant dark (Figma: bubble 1 navy) — gray border */
.nx-testimonial-1 .nx-testimonial-bubble {
  background: #0F1A28;
  color: #ffffff;
  border: 2px solid #9aa5b4;
}
.nx-testimonial-1 .nx-testimonial-tail { color: #0F1A28; }
.nx-testimonial-1 .nx-testimonial-author cite { color: #f6fd60; }
.nx-testimonial-1 .nx-testimonial-author .nx-testimonial-role { color: rgba(255,255,255,0.7); }

/* Variant white (Figma: bubble 2 + 3) — border navy oscuro */
.nx-testimonial-2 .nx-testimonial-bubble,
.nx-testimonial-3 .nx-testimonial-bubble {
  background: #ffffff;
  color: #06162B;
  border: 2px solid #354457;
}
.nx-testimonial-2 .nx-testimonial-tail,
.nx-testimonial-3 .nx-testimonial-tail {
  color: #ffffff;
  bottom: -32px;
  clip-path: inset(34px 0 0 0);
}
/* Cubrimos el bottom-border del bubble en el ancho donde sale el tail
   para que la línea navy no quede "encima" del tail. */
.nx-testimonial-2 .nx-testimonial-bubble::after,
.nx-testimonial-3 .nx-testimonial-bubble::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 9%;
  width: 38px;
  height: 4px;
  background: #ffffff;
  z-index: 1;
}
.nx-testimonial-2 .nx-testimonial-tail-stroke,
.nx-testimonial-3 .nx-testimonial-tail-stroke {
  stroke: #354457;
  stroke-width: 4;
}
.nx-testimonial-2 .nx-testimonial-author cite,
.nx-testimonial-3 .nx-testimonial-author cite { color: #212e3f; }
.nx-testimonial-2 .nx-testimonial-author .nx-testimonial-role,
.nx-testimonial-3 .nx-testimonial-author .nx-testimonial-role { color: #354457; }

/* Posición per-card según Figma: card 1 (t1) cola + Lia abajo-izquierda,
   card 2 (t2) abajo-derecha (espejo), card 3 (t3) abajo-centro.
   Los defaults aquí son los de la card 1; t2/t3 se sobrescriben más abajo. */
.nx-testimonial-avatar {
  position: relative;
  margin-top: 56px;
  margin-left: 40px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* Halo verde-amarillo bottom-left — soft + diffuse, sin blend mode */
.nx-testimonial-avatar::before {
  content: "";
  position: absolute;
  inset: -56px;
  background: radial-gradient(circle at 28% 72%,
    rgba(246, 253, 96, 0.85) 0%,
    rgba(123, 255, 123, 0.55) 25%,
    transparent 55%);
  filter: blur(22px);
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
}
/* Halo azul/lila top-right — soft + diffuse */
.nx-testimonial-avatar::after {
  content: "";
  position: absolute;
  inset: -56px;
  background: radial-gradient(circle at 72% 28%,
    rgba(137, 142, 242, 0.85) 0%,
    rgba(91, 97, 232, 0.55) 25%,
    transparent 55%);
  filter: blur(22px);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.nx-testimonial-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: contain;
  /* Anillo blanco loading loop (Figma _animation_loading_loop) */
  box-shadow: 0 0 0 3px #ffffff;
  background: #0F1A28;
  position: relative;
  z-index: 1;
}

/* ── Posición per-card de cola + Lia (Figma) ────────────────── */
/* Card 2 (t2): cola + Lia abajo-DERECHA (espejo de la card 1). */
.nx-testimonial-2 .nx-testimonial-tail {
  left: auto;
  right: 8%;
  transform: scaleX(-1);
}
.nx-testimonial-2 .nx-testimonial-bubble::after {
  left: auto;
  right: 9%;
}
.nx-testimonial-2 .nx-testimonial-avatar {
  align-self: flex-end;
  margin-left: 0;
  margin-right: 40px;
}
/* Card 3 (t3): cola + Lia abajo-CENTRO. */
.nx-testimonial-3 .nx-testimonial-tail {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.nx-testimonial-3 .nx-testimonial-bubble::after {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.nx-testimonial-3 .nx-testimonial-avatar {
  align-self: center;
  margin-left: 0;
}

/* ─── HOME — Community (Figma navy card) ──────────────────── */
.nx-home-community-wrap { background: #ffffff; padding: 64px 0; }
.nx-home-community {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #0F1A28;
  color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  min-height: 440px;
}
.nx-home-community-content {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  order: 1;
}
.nx-home-community-content h2 {
  color: #ffffff;
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.96px;
  line-height: 1.2;
}
.nx-home-community-content p {
  color: #d2dae6;
  margin: 0 0 16px;
  max-width: 544px;
  font-size: 1.25rem;
  line-height: 1.5;
}
.nx-home-community-content .nx-btn { align-self: flex-start; }
.nx-home-community-image {
  background: var(--colors-background-bg-tertiary, #d5d7da) center/cover no-repeat;
  min-height: 440px;
  order: 2;
}

/* ─── HOME — FAQ ──────────────────────────────────────────── */
.nx-home-faq { padding: 96px 0; }
.nx-faq-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.nx-home-faq h2 { margin: 0 0 20px; letter-spacing: -0.72px; }
.nx-faq-subtitle { color: #354457; font-size: 1.25rem; line-height: 1.5; margin: 0; }
.nx-faq { max-width: 768px; margin: 0 auto; }
.nx-faq details {
  border-top: 1px solid #b6bfcd;
  border-bottom: 0;
  padding: 24px 0;
}
.nx-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.125rem;
  gap: 16px;
}
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}
.nx-faq details[open] summary::after { transform: rotate(180deg); }
.nx-faq details > div {
  padding-top: 16px;
  color: #354457;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ─── HOME — Contact CTA con Lia (Figma navy card) ────────── */
.nx-home-contact {
  background: #ffffff;
  padding: 64px 0;
}
.nx-home-contact .nx-container {
  background: #0F1A28;
  color: #ffffff;
  border-radius: 24px;
  padding: 64px;
  max-width: 1200px;
  position: relative;
  overflow: hidden;
}
.nx-cta-lia-squiggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.nx-home-contact .nx-cta-lia { position: relative; z-index: 1; }
.nx-cta-lia {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: center;
}
.nx-cta-lia-avatar {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.nx-cta-lia-bubble {
  position: relative;
  background: #ffffff;
  color: #06162b;
  border: 2px solid #0F1A28;
  border-radius: 24px;
  padding: 32px 24px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 340px;
  margin-bottom: 56px;
  box-shadow: 0 8px 24px rgba(15, 26, 40, 0.15);
}
.nx-cta-lia-tail {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-12%);
  width: 46px;
  height: 60px;
  color: #ffffff;
  pointer-events: none;
  display: block;
  overflow: visible;
  clip-path: inset(48% 0 0 0);
}
.nx-cta-lia-figure {
  position: relative;
  width: 180px;
  height: 180px;
  display: block;
}
.nx-cta-lia-figure .nx-cta-lia-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
}
.nx-cta-lia-figure .nx-lia-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: lia-orbit 18s linear infinite;
  z-index: 1;
}
.nx-cta-lia-content h2 {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.72px;
  line-height: 1.2;
}
.nx-cta-lia-content p {
  color: #d2dae6;
  margin: 0 0 48px;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* ─── Footer extendido ────────────────────────────────────── */
.nx-footer-payments {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  text-align: center;
}
.nx-footer-payments-label {
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.4;
}
.nx-footer-payments-label small {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
.nx-footer-payments img { height: 36px; object-fit: contain; }

/* ─── Responsive (mobile 767px) ───────────────────────────── */
@media (max-width: 767px) {
  .nx-mobile-toggle { display: inline-flex; }
  .nx-mobile-cluster { display: flex; align-items: center; gap: 4px; }
  .nx-header-actions { display: none; }
  .nx-nav-desktop { display: none; }
  .nx-nav-desktop.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--colors-background-bg-brand-section, #0f1a28);
    padding: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 99;
    gap: 16px;
  }
  .nx-nav-desktop.is-open .nx-nav-item > a::after { display: none; }
  .nx-nav-desktop.is-open .nx-dropdown {
    position: static;
    background: transparent;
    color: inherit;
    box-shadow: none;
    padding: 12px 0 12px 16px;
    display: none;
  }
  .nx-nav-desktop.is-open .nx-nav-item.is-open .nx-dropdown { display: block; }
  .nx-nav-desktop.is-open .nx-dropdown-mega {
    grid-template-columns: 1fr;
    gap: 16px;
    min-width: 0;
  }
  /* En mobile el mega-menú se renderiza como bloque (la regla .is-open .nx-dropdown
     con display:block gana sobre display:grid), por lo que `gap` es inerte y las
     columnas apiladas quedaban pegadas. La separación va por margin entre columnas. */
  .nx-nav-desktop.is-open .nx-dropdown-mega .nx-dropdown-col + .nx-dropdown-col {
    margin-top: 28px;
  }
  /* Acciones (login/contacto) dentro del menú hamburguesa — fiel a Figma.
     Botones full-width apilados al final del menú abierto. */
  .nx-nav-desktop.is-open .nx-nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }
  .nx-nav-desktop.is-open .nx-nav-mobile-actions .nx-btn { width: 100%; }
  .nx-nav-mobile-user {
    font-weight: 600;
    color: #ffffff;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    word-break: break-word;
  }

  .nx-home-hero { padding: 64px 0 80px; }

  .nx-bento {
    grid-template-columns: 1fr;
    grid-template-areas: "card1" "card2" "card3" "card4";
  }
  .nx-bento-card-1, .nx-bento-card-2, .nx-bento-card-3, .nx-bento-card-4 {
    aspect-ratio: auto;
    min-height: 320px;
  }
  /* Splits horizontales (card-1, card-4) → apilar foto sobre contenido en mobile.
     Sin esto card-4 (M365) queda en 2 columnas + rtl dentro de 375px: clipa el
     título, el badge y el botón "Conocer más". */
  .nx-bento .nx-bento-card-1.nx-bento-split,
  .nx-bento .nx-bento-card-4.nx-bento-split,
  .nx-bento .nx-bento-card-4.nx-bento-split.nx-bento-split-reverse {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    direction: ltr;
  }
  .nx-bento-content { padding: 40px 24px; gap: 20px; }
  .nx-bento-split .nx-bento-title { font-size: 2rem; }

  .nx-home-community {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .nx-home-community-image { min-height: 320px; }
  .nx-home-community-content { padding: 48px 24px; }

  .nx-home-contact .nx-container { padding: 40px 24px; }
  .nx-cta-lia { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .nx-cta-lia-avatar { max-width: 320px; min-height: 360px; }
  .nx-cta-lia-content .nx-btn { display: inline-block; }

  .nx-footer-payments { gap: 16px; }
}

/* ─── Logo contextual colors (header + footer sobre fondo navy) ── */
.nx-header .nx-logo { color: #ffffff; }
.nx-header .nx-logo .nx-logo-dot { fill: #F6FD60; }
.nx-footer .nx-logo { color: #ffffff; }
.nx-footer .nx-logo .nx-logo-dot { fill: #7B7AF7; }

/* ─── Lang toggle (EN button) ──────────────────────────────── */
.nx-lang-toggle {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 6px;
  cursor: pointer;
  opacity: 0.85;
}
.nx-lang-toggle:hover { opacity: 1; }

/* ─── Cart link ───────────────────────────────────────────── */
.nx-cart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: inherit;
  border-radius: 999px;
  transition: background 0.15s;
}
.nx-cart-link:hover {
  background: rgba(255,255,255,0.1);
}
.nx-cart-link svg { width: 22px; height: 22px; }
.nx-cart-link { position: relative; }
.nx-cart-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #F6FD60;
  border: 2px solid #0F1A28;
  border-radius: 50%;
  pointer-events: none;
}


/* ─── Bento split cards (Figma) — foto + panel navy ───────── */
.nx-bento-split {
  background: #0F1A28;
  color: #ffffff;
  text-decoration: none;
  display: grid;
  overflow: hidden;
  padding: 0;
}
.nx-bento-card-1.nx-bento-split,
.nx-bento-card-4.nx-bento-split {
  grid-template-columns: 1fr 1fr;
}
.nx-bento-card-4.nx-bento-split.nx-bento-split-reverse {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}
.nx-bento-card-4.nx-bento-split.nx-bento-split-reverse > * { direction: ltr; }
.nx-bento-card-2.nx-bento-split,
.nx-bento-card-3.nx-bento-split {
  grid-template-rows: 1fr 1fr;
}
.nx-bento-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 240px;
}
.nx-bento-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 64px 80px;
  justify-content: center;
}
.nx-bento-card-2 .nx-bento-content,
.nx-bento-card-3 .nx-bento-content { padding: 48px 48px; gap: 32px; }
.nx-bento-badge {
  align-self: flex-start;
  display: inline-block;
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
  color: #212e3f;
  background: #f6fd60;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
}
.nx-bento-split .nx-bento-title {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.96px;
  margin: 0;
  max-width: none;
}
.nx-bento-card-2 .nx-bento-title,
.nx-bento-card-3 .nx-bento-title {
  font-size: 2.25rem;
  letter-spacing: -0.72px;
}
.nx-bento-split .nx-bento-desc {
  color: rgba(255,255,255,0.85);
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}
.nx-btn-white {
  align-self: flex-start;
  background: #ffffff;
  color: #0F1A28;
  border-radius: 9999px;
  padding: 12px 18px;
  font-weight: 600;
  margin-top: 0;
  text-decoration: none;
  display: inline-block;
}
/* .nx-btn-white hover usa el efecto Figma de .nx-btn:hover (universal) */
@media (max-width: 767px) {
  .nx-bento-card-1.nx-bento-split,
  .nx-bento-card-4.nx-bento-split { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .nx-bento-card-4.nx-bento-split.nx-bento-split-reverse { direction: ltr; }
  .nx-bento-content { padding: 32px 24px; }
}

/* ─── Hero grid responsive ─────────────────────────────────── */
@media (max-width: 767px) {
  .nx-home-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .nx-home-hero-lia { max-width: 280px; }
}

/* ─── Testimonials responsive ──────────────────────────────── */
@media (max-width: 767px) {
  .nx-testimonials-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "t1" "t2" "t3";
    gap: 32px;
  }
}

/* ============================================================
   ITER 2 — Página Dominios
   ============================================================ */

.nx-dominios-hero {
  position: relative;
  background: var(--colors-background-bg-brand-section, #0f1a28);
  color: #ffffff;
  padding: 96px 0 80px;
  overflow: hidden;
}
.nx-dominios-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.nx-dominios-hero-inner h1 { margin-bottom: 16px; }
.nx-dominios-hero-inner .nx-hero-subtitle {
  font-size: 1.125rem;
  opacity: 0.85;
  margin-bottom: 32px;
}
.nx-dominios-hero-inner .nx-domain-search { margin: 0 auto; }
.nx-dominios-hero-cta { margin: 0 auto; }
.nx-dominios-hero-cta .nx-btn { padding: 14px 40px; font-size: 1rem; }

/* SELECTION BAR — barra fija inferior tras agregar dominios */
.nx-selection-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: #0F1A28;
  color: #ffffff;
  border-top: 2px solid #F6FD60;
  transform: translateY(0);
  transition: transform 0.25s ease;
}
.nx-selection-bar.is-hidden {
  transform: translateY(110%);
  pointer-events: none;
}
.nx-selection-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 32px;
}
.nx-selection-bar-text { min-width: 0; }
.nx-selection-bar-title {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}
.nx-selection-bar-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.nx-selection-bar-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nx-selection-bar-link {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 0;
  transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}
.nx-selection-bar-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.92;
}
.nx-selection-bar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0F1A28;
  text-decoration: none;
  background: linear-gradient(90deg, #F6FD60 0%, #C2F9C6 50%, #898EF2 100%);
  box-shadow: 0 0 24px rgba(246, 253, 96, 0.35);
  /* Patrón 1 Primary (gradient sin border visible): thick bottom LILA + padding shift. */
  transition: padding 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.nx-selection-bar-cta:hover {
  padding-top: 10px;
  padding-bottom: 14px;
  box-shadow:
    0 0 32px rgba(246, 253, 96, 0.5),
    inset 0 -4px 0 #898ef2;
}
.nx-selection-bar-cta:active { transform: scale(0.98); }
.nx-selection-bar-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nx-selection-bar-close:hover { color: #ffffff; }

/* La barra stackea a 1024px (no 767px): su contenido es ancho (texto + 2
   acciones + cerrar) y entre 768-1024px el layout horizontal de desktop se
   desbordaba a la derecha, cortando "Agregar plan de hosting". */
@media (max-width: 1024px) {
  .nx-selection-bar-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 20px 20px;
  }
  .nx-selection-bar-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .nx-selection-bar-link { text-align: center; }
  .nx-selection-bar-cta { width: 100%; }
}

/* RESULTADOS — layout Figma */
.nx-dominios-resultados {
  padding: 64px 0 96px;
  background: #ffffff;
}
.nx-resultados-title {
  text-align: center;
  margin-bottom: 32px;
  color: #0F1A28;
  font-weight: 700;
}
.nx-resultados-query { color: var(--colors-text-text-lilac, #898EF2); font-weight: 700; }
.nx-dominios-empty {
  text-align: center;
  color: var(--colors-text-text-secondary, #555);
  padding: 32px;
}

.nx-resultados-table {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.nx-resultado-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 16px 24px;
  border-radius: 12px;
}
.nx-resultado-row:nth-child(odd) { background: #EFF6FF; }
/* Fila destacada: la extensión exacta que el usuario buscó ("Tu búsqueda"). Va después
   del nth-child(odd) para ganar el empate de especificidad y forzar fondo blanco + realce. */
.nx-resultado-row.is-destacada {
  background: #fff;
  border: 2px solid transparent;
  border-image: linear-gradient(90deg, #898EF2, #F6FD60 35%, #C2F9C6 65%, #898EF2) 1;
  box-shadow: 0 8px 24px -8px rgba(89, 97, 232, .35);
}
.nx-resultado-badge {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #5b60d6; background: #ecedfb; border-radius: 999px; padding: 3px 10px;
}
/* Aviso: la extensión buscada no está en el catálogo (informativo, ámbar). */
.nx-dominios-aviso {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 1100px; margin: 0 auto 20px; padding: 14px 18px;
  border: 1px solid #ffe1b0; background: #fff8ec; border-radius: 12px; color: #5b4a2a;
}
.nx-dominios-aviso svg { flex: 0 0 auto; width: 22px; height: 22px; color: #e08e0b; margin-top: 1px; }
.nx-dominios-aviso-tit { color: #3d3115; }
.nx-dominios-aviso-sub { font-size: .9rem; color: #7a6a45; margin-top: 2px; }
.nx-resultado-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-resultado-name {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nx-resultado-dominio {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F1A28;
}
.nx-resultado-desc {
  color: #4C5B6F;
  font-size: 0.9rem;
  margin: 0;
}
.nx-resultado-price {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  /* min-width = ancho de la línea más larga de TODAS las extensiones
     (typ. "$X + IVA Anual con plan de hosting sin promoción" ~ 320px),
     así todos los rows alinean su columna de precios al mismo x. */
  min-width: 340px;
  text-align: left;
}
.nx-resultado-price > * { text-align: left; }
.nx-resultado-price-main {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 4px;
  line-height: 1.2;
}
.nx-resultado-price-amount {
  color: #0F1A28;
  font-size: 1rem;
  font-weight: 700;
}
.nx-resultado-price-suffix {
  color: #4C5B6F;
  font-size: 0.85rem;
  font-weight: 500;
}
.nx-resultado-price-note {
  color: #4C5B6F;
  font-size: 0.8rem;
  line-height: 1.3;
}
.nx-resultado-price-promo {
  color: #5B61E8;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 2px;
}
.nx-resultado-renovacion {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: #7287A3;
  font-style: italic;
}
.nx-resultado-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
}
.nx-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 110px;
  border: 1px solid #0F1A28;
  cursor: pointer;
  /* Skeuomorphic en base (igual que "Buscar"): navy border 1px + drop shadow
     + inner glows yellow/lila sutiles. */
  box-shadow:
    0 1px 2px 4px rgba(15, 26, 40, 0.05),
    inset 0 -2px 0 0 rgba(250, 255, 69, 0.14),
    inset 0 0 0 1px rgba(127, 140, 247, 0.18);
  transition: box-shadow 0.18s ease, background 0.18s ease, padding 0.18s ease, transform 0.05s ease;
}
/* Hover idéntico a "Buscar" (.nx-domain-search-form button:hover): el contenido
   sube vía padding shift + thick edge inferior navy, reemplazando el skeu. */
.nx-btn-pill:hover {
  padding-top: 8px;
  padding-bottom: 12px;
  box-shadow: inset 0 -4px 0 0 #0f1a28;
}
.nx-btn-pill:active { transform: scale(0.97); }
.nx-btn-pill-add {
  background: #f6fd60;
  color: #0F1A28;
}
.nx-btn-pill-remove {
  /* Estilo outline-dark (mismo que "Continuar sin hosting" en /compra/hosting):
     transparente + borde navy, SIN skeuomorphic. Cancela el box-shadow skeu
     heredado de .nx-btn-pill. (Figma no define "Quitar" — sólo "Agregado";
     decisión de producto: mantener acción de quitar con look outline limpio.) */
  background: transparent;
  color: #0F1A28;
  border: 1.5px solid #0F1A28;
  box-shadow: none;
}
.nx-btn-pill-remove:hover {
  box-shadow: inset 0 -4px 0 0 rgba(15, 26, 40, 0.35);
  border-bottom-width: 2.5px;
  padding-top: 8px;
  padding-bottom: 12px;
}
.nx-resultado-unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Mismo footprint que .nx-btn-pill (padding/min-width/borde) para que el pill
     "No disponible" alinee con los botones Agregar/Quitar al bajar por la columna. */
  padding: 10px 24px;
  min-width: 110px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #D2DAE6;
  color: #4C5B6F;
  font-size: 0.9rem;
  font-weight: 500;
}
.nx-resultado-row.is-taken .nx-resultado-dominio { color: #354457; }
/* Las filas "No disponible" (is-taken) no renderizan la columna de precio, así que su
   .nx-resultado-action se auto-ubicaría en la 2da columna (la del precio) y el pill quedaría
   a la izquierda de los botones Agregar/Quitar. En desktop lo forzamos a la 3ra columna para
   que alinee con ellos. En móvil el grid es de 1 columna, así que no aplica. */
@media (min-width: 768px) {
  .nx-resultado-row.is-taken .nx-resultado-action { grid-column: 3; }
}

/* Búsqueda progresiva: estados "verificando" y "reintentar". */
.nx-resultado-checking { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 120px; }
.nx-resultado-checking-text, .nx-resultado-retry-text { color: #7287A3; font-size: 0.85rem; }
.nx-resultado-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #C7D0DE; border-top-color: #5B61E8;
  display: inline-block; animation: nx-spin 0.7s linear infinite; flex: 0 0 auto;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }
.nx-resultado-retry-btn { padding: 6px 14px; min-width: 0; font-size: 0.85rem; }
@media (min-width: 768px) {
  /* checking/retry tampoco tienen columna de precio → acción a la 3ra columna, como is-taken. */
  .nx-resultado-row.is-checking .nx-resultado-checking,
  .nx-resultado-row.is-retry .nx-resultado-action,
  .nx-resultado-row.is-retry [data-slot="celda"] { grid-column: 3; }
}

@media (max-width: 767px) {
  .nx-resultados-header-label { padding-right: 0; }
  .nx-resultado-row { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .nx-resultado-price { align-items: flex-start; text-align: left; min-width: 0; }
  .nx-resultado-action { justify-content: flex-start; }
}

/* FEATURES (Diferenciador de valor) */
.nx-dominios-features { padding: 96px 0; }
.nx-dominios-features h2 { text-align: center; margin-bottom: 12px; }
.nx-dominios-features .nx-section-subtitle { text-align: center; margin-bottom: 48px; color: #0F1A28; }
.nx-dominios-features .nx-feature-card p { color: #0F1A28; }
.nx-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.nx-feature-card {
  background: transparent;
  padding: 32px;
  border-radius: 20px;
  text-align: center;
}
.nx-feature-card h3 { margin-bottom: 12px; font-size: 1.25rem; color: #0F1A28; }
.nx-feature-card p { color: var(--colors-text-text-secondary, #555); }

/* EXTENSIONES (educativo) */
.nx-dominios-extensiones {
  padding: 64px 0 96px;
  background: var(--colors-background-bg-secondary, #f6f8fb);
}
.nx-dominios-extensiones h2 { text-align: center; margin-bottom: 12px; }
.nx-section-subtitle { text-align: center; color: var(--colors-text-text-secondary, #555); margin-bottom: 48px; }
.nx-extensiones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.nx-extension-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid var(--colors-border-border-primary, #e5e7eb);
}
.nx-extension-ext {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--colors-text-text-brand-secondary, #7f56d9);
  margin-bottom: 8px;
}
.nx-extension-card p { font-size: 0.85rem; color: var(--colors-text-text-secondary, #555); margin-bottom: 12px; min-height: 36px; }
.nx-extension-precio { font-size: 0.9rem; font-weight: 600; }
.nx-extension-precio span { display: block; font-weight: 400; opacity: 0.7; font-size: 0.75rem; }

/* RECOMMENDATION */
.nx-dominios-recommend {
  padding: 96px 0;
  text-align: center;
}
.nx-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--colors-text-text-brand-secondary, #7f56d9);
  font-weight: 600;
  margin-bottom: 12px;
}
.nx-dominios-recommend h2 { margin-bottom: 16px; max-width: 600px; margin-left: auto; margin-right: auto; }
.nx-dominios-recommend p { color: var(--colors-text-text-secondary, #555); margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* RESPONSIVE Dominios */
@media (max-width: 767px) {
  .nx-features-grid, .nx-extensiones-grid { grid-template-columns: 1fr; }
  .nx-dominio-row { grid-template-columns: 1fr; gap: 12px; }
  .nx-dominio-price { text-align: left; }
}

/* ─── Iter 2 polish: Extensiones dark table ──────────────── */
.nx-dominios-extensiones-dark {
  background: var(--colors-background-bg-brand-section, #0f1a28);
  color: #ffffff;
}
.nx-dominios-extensiones-dark h2,
.nx-dominios-extensiones-dark .nx-section-subtitle {
  color: #ffffff;
  text-align: left;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.nx-dominios-extensiones-dark .nx-section-subtitle { opacity: 0.7; margin-bottom: 48px; }
.nx-extensiones-table {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nx-ext-row {
  display: grid;
  grid-template-columns: 100px 1fr 160px 160px;
  grid-template-areas:
    "ext desc reg ren"
    "ext .    promo promo";
  gap: 8px 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nx-ext-row-ext             { grid-area: ext; }
.nx-ext-row-desc            { grid-area: desc; }
.nx-ext-row-precio-registro { grid-area: reg; }
.nx-ext-row-precio-renovacion { grid-area: ren; }
.nx-ext-row-promo           { grid-area: promo; }
.nx-ext-row:last-child { border-bottom: 0; }
.nx-ext-row-ext {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}
.nx-ext-row-desc {
  font-size: 0.95rem;
  opacity: 0.85;
}
.nx-ext-row-precio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.nx-ext-row-precio-label {
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.6;
}
.nx-ext-row-precio-value {
  font-size: 0.95rem;
  font-weight: 600;
}
.nx-ext-row-promo {
  font-size: 0.85rem;
  font-weight: 600;
  color: #F6FD60;
  line-height: 1.3;
  align-self: start;
}
@media (max-width: 767px) {
  .nx-ext-row {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "ext desc"
      ".   reg"
      ".   ren"
      ".   promo";
    gap: 8px 12px;
  }
  .nx-ext-row-desc { font-size: 0.85rem; }
  .nx-ext-row-precio { flex-direction: row; gap: 16px; }
}

/* ─── Iter 2 polish: Cross-sell 3 dark cards (Figma) ─────── */
.nx-dominios-recommend {
  background: #ffffff;
  color: #0F1A28;
  padding: 96px 0;
  text-align: center;
}
.nx-dominios-recommend h2 { color: #0F1A28; margin-bottom: 12px; }
.nx-dominios-recommend .nx-section-subtitle { color: #354457; margin-bottom: 48px; }
.nx-recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.nx-recommend-card {
  background: #0F1A28;
  border-radius: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}
.nx-recommend-icon {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #0F1A28;
  position: relative;
}
.nx-recommend-icon svg { width: 72px; height: 72px; }
.nx-recommend-icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16px;
  background: linear-gradient(to bottom, rgba(15,26,40,0), #0A1320);
}
.nx-recommend-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: #0F1A28;
}
.nx-recommend-card .nx-recommend-badge {
  align-self: flex-start;
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0F1A28;
  background: #f6fd60;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  margin: 0;
}
.nx-recommend-card h3 { color: #ffffff; font-size: 1.5rem; margin: 0; line-height: 1.2; }
.nx-recommend-card p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin: 0 0 auto; line-height: 1.5; }
.nx-recommend-card .nx-btn {
  align-self: flex-start;
  margin-top: 16px;
  background: #ffffff;
  color: #0F1A28;
  border-radius: 9999px;
  padding: 10px 20px;
  font-weight: 600;
}
.nx-recommend-card .nx-btn:hover { background: #f0f0f0; }
@media (max-width: 767px) {
  .nx-recommend-grid { grid-template-columns: 1fr; }
  .nx-recommend-card { min-height: 0; }
}

/* ─── Iter 2 polish: Feature icons ───────────────────────── */
.nx-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--colors-background-bg-brand-secondary, #c4c2fa);
  color: var(--colors-text-text-brand-primary, #0f1a28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.nx-feature-icon svg {
  width: 32px;
  height: 32px;
}
.nx-feature-card { padding-top: 40px; }

/* === NX.dialog — confirm/alert modals === */
.nx-dialog {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.nx-dialog[hidden] { display: none; }
.nx-dialog-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 26, 40, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.nx-dialog-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 32px 32px 24px;
  width: calc(100% - 32px);
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(15, 26, 40, .25);
  text-align: center;
}
.nx-dialog-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: rgba(91, 97, 232, .12);
  color: #5B61E8;
}
.nx-dialog[data-variant="success"] .nx-dialog-icon { background: rgba(34, 197, 94, .15); color: #16a34a; }
.nx-dialog[data-variant="warning"] .nx-dialog-icon { background: rgba(250, 255, 69, .35); color: #806b00; }
.nx-dialog[data-variant="danger"]  .nx-dialog-icon { background: rgba(204, 68, 68, .12); color: #c44; }
.nx-dialog-title {
  font-size: 20px; font-weight: 700; color: #0F1A28;
  margin: 0 0 8px;
}
.nx-dialog-message {
  font-size: 15px; color: #506680;
  margin: 0 0 24px; line-height: 1.5;
}
.nx-dialog-actions {
  display: flex; gap: 12px; justify-content: center;
}
.nx-dialog-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 110px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, transform .05s, opacity .15s;
}
.nx-dialog-btn:active { transform: translateY(1px); }
.nx-dialog-btn-secondary {
  background: transparent;
  border-color: #d0d6e0;
  color: #0F1A28;
}
.nx-dialog-btn-secondary:hover { background: #f5f7fa; }
.nx-dialog-btn-primary {
  background: #f6fd60; color: #0F1A28;
  border-color: #f6fd60;
}
.nx-dialog-btn-primary:hover { background: #e4e83a; }
.nx-dialog[data-variant="danger"] .nx-dialog-btn-primary {
  background: #c44; color: #fff; border-color: #c44;
}
.nx-dialog[data-variant="danger"] .nx-dialog-btn-primary:hover { background: #a32; border-color: #a32; }
.nx-dialog[data-variant="success"] .nx-dialog-btn-primary {
  background: #16a34a; color: #fff; border-color: #16a34a;
}
.nx-dialog[data-variant="success"] .nx-dialog-btn-primary:hover { background: #128838; border-color: #128838; }


/* Menú de usuario logueado (header) */

.nx-user-menu {
    position: relative;
}

.nx-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--colors-text-text-brand-tertiary, #f6fd60);
    border: 1.5px solid var(--colors-text-text-brand-tertiary, #f6fd60);
    border-radius: 999px;
    padding: 12px 20px;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: padding 0.18s ease, border-bottom-width 0.18s ease;
}

.nx-user-trigger:hover {
    /* Mismo efecto Figma que .nx-btn-secondary:hover */
    background: transparent;
    color: var(--colors-text-text-brand-tertiary, #f6fd60);
    box-shadow: inset 0 -4px 0 0 #f6fd60;
    border-bottom-width: 2.5px;
    padding-top: 10px;
    padding-bottom: 14px;
}

.nx-user-name {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
}

.nx-user-name-text {
    display: inline-block;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Marquee on hover: si el texto excede 180px, slide left para revelarlo;
   si cabe, min() mantiene translateX(0) y no pasa nada. */
.nx-user-trigger:hover .nx-user-name-text,
.nx-user-trigger:focus-visible .nx-user-name-text {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    animation: nx-name-marquee 6s ease-in-out 0.4s infinite alternate;
}

@keyframes nx-name-marquee {
    0%, 18%   { transform: translateX(0); }
    50%, 68%  { transform: translateX(min(0px, calc(180px - 100%))); }
    100%      { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .nx-user-trigger:hover .nx-user-name-text,
    .nx-user-trigger:focus-visible .nx-user-name-text {
        animation: none;
    }
}

.nx-user-dropdown-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--nx-border, #e5e7eb);
    margin-bottom: 4px;
    color: var(--nx-text-muted, #6b7280);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
}

.nx-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid var(--nx-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    padding: 6px;
    display: none;
    z-index: 100;
}

.nx-user-menu[aria-expanded="true"] .nx-user-dropdown,
.nx-user-menu.is-open .nx-user-dropdown {
    display: block;
}

.nx-user-dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--nx-text-strong, #1a1a1a);
    font-size: 14px;
}

.nx-user-dropdown a:hover {
    background: var(--nx-bg-soft, #f3f4f6);
}