/* =====================================================================
   APICE SERVICES — Portada
   El hero es siempre oscuro (grafito metálico con trazas de circuito y
   brillos cian), como la pieza de colores corporativos. El resto de las
   secciones sigue el tema claro u oscuro elegido.
   ===================================================================== */

/* ------------------------------ HERO -------------------------------- */
.hx {
  position: relative; overflow: hidden; isolation: isolate;
  color: #DCE6F0;
  background:
    radial-gradient(900px 520px at 72% 18%, rgba(31, 150, 211, .30), transparent 64%),
    radial-gradient(700px 420px at 8% 90%, rgba(26, 184, 232, .14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #121A26 0%, #0B111A 46%, #070B11 100%);
  padding: clamp(56px, 8vw, 112px) 0 clamp(72px, 9vw, 128px);
}
/* Trazas de circuito en las esquinas */
.hx__circuito {
  position: absolute; z-index: -1; pointer-events: none; color: #2E7DB0; opacity: .55;
}
.hx__circuito--a { top: 40px; left: -30px; width: min(520px, 60vw); }
.hx__circuito--b { right: -40px; bottom: -10px; width: min(560px, 64vw); transform: scaleX(-1); }
.hx__circuito path { stroke: currentColor; }
.hx__circuito .nodo { fill: #3CCFF5; filter: drop-shadow(0 0 6px #1AB8E8); }
.hx__circuito .pulso {
  stroke: #7DE3FF; stroke-width: 2; stroke-dasharray: 14 400; stroke-dashoffset: 414;
  animation: hx-pulso 6s linear infinite; opacity: .9;
}
.hx__circuito--b .pulso { animation-delay: -2.4s; animation-duration: 7.5s; }
@keyframes hx-pulso { to { stroke-dashoffset: 0; } }

/* Destellos difusos (bokeh) */
.hx__luz {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(60, 207, 245, .55), rgba(26, 184, 232, 0) 70%);
  filter: blur(2px); animation: hx-titila 7s ease-in-out infinite;
}
.hx__luz--1 { width: 26px; height: 26px; top: 22%; left: 6%; }
.hx__luz--2 { width: 40px; height: 40px; top: 62%; right: 4%; animation-delay: -2s; }
.hx__luz--3 { width: 18px; height: 18px; top: 82%; left: 42%; animation-delay: -4s; }
.hx__luz--4 { width: 30px; height: 30px; top: 12%; right: 30%; animation-delay: -1s; opacity: .6; }
@keyframes hx-titila { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

.hx__grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 960px) { .hx__grid { grid-template-columns: 1fr; } }

.hx__chip {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 14px 7px 8px; border-radius: var(--r-full);
  background: rgba(26, 184, 232, .08); border: 1px solid rgba(60, 207, 245, .28);
  font-size: var(--fs-sm); color: #B9D8EC; margin-bottom: 26px;
  backdrop-filter: blur(6px);
}
.hx__chip b {
  font-family: var(--font-display); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full); color: #03202E;
  background: linear-gradient(135deg, #7DE3FF, #1AB8E8);
}
.hx h1 {
  color: #fff; margin: 0 0 22px;
  font-size: clamp(2.35rem, 1.35rem + 4vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; font-weight: 800;
}
.hx h1 .hx__brillo {
  background: linear-gradient(92deg, #7DE3FF 0%, #1AB8E8 45%, #45ADE2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(26, 184, 232, .25);
}
.hx__lead { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.7; color: #AFC0D2; max-width: 600px; margin: 0 0 34px; }
.hx__lead strong { color: #E6F2FB; font-weight: 600; }
.hx__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.hx .btn--accent { box-shadow: 0 10px 30px rgba(26, 184, 232, .35); }
.hx .btn--accent:hover { box-shadow: 0 14px 40px rgba(26, 184, 232, .5); }

.hx__kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 26px; max-width: 560px;
}
.hx__kpi + .hx__kpi { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .09); }
.hx__kpi strong {
  display: block; font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing: -0.02em; line-height: 1;
}
.hx__kpi strong em { font-style: normal; color: var(--accent-400); }
.hx__kpi span { display: block; margin-top: 8px; font-size: var(--fs-xs); color: #8C9DB0; line-height: 1.45; }

/* --- Visual: robot con anillos holográficos y tarjetas flotantes --- */
.hx__visual { position: relative; min-height: 460px; display: grid; place-items: center; }
@media (max-width: 960px) { .hx__visual { min-height: 400px; } }
.hx__orbita {
  position: absolute; inset: 50% auto auto 50%; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 1px solid rgba(60, 207, 245, .22);
}
.hx__orbita--1 { width: 300px; height: 300px; box-shadow: inset 0 0 60px rgba(26,184,232,.12), 0 0 60px rgba(26,184,232,.10); }
.hx__orbita--2 { width: 420px; height: 420px; border-style: dashed; border-color: rgba(60, 207, 245, .16); animation: hx-gira 60s linear infinite; }
.hx__orbita--3 { width: 540px; height: 540px; border-color: rgba(60, 207, 245, .08); }
@media (max-width: 560px) {
  .hx__orbita--1 { width: 240px; height: 240px; }
  .hx__orbita--2 { width: 320px; height: 320px; }
  .hx__orbita--3 { display: none; }
}
@keyframes hx-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hx__orbita--2::before, .hx__orbita--2::after {
  content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: #7DE3FF; box-shadow: 0 0 14px #1AB8E8;
}
.hx__orbita--2::before { top: -5px; left: 50%; }
.hx__orbita--2::after { bottom: 14%; right: 6%; width: 6px; height: 6px; }

.hx__robot {
  position: relative; width: clamp(190px, 22vw, 250px); aspect-ratio: 1;
  filter: drop-shadow(0 0 38px rgba(26, 184, 232, .55)) drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
  animation: hx-flota 6s ease-in-out infinite;
}
.hx__robot img { width: 100%; height: 100%; display: block; }
@keyframes hx-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hx__tarjeta {
  position: absolute; z-index: 2;
  display: flex; gap: 11px; align-items: center;
  padding: 12px 15px; border-radius: 14px; max-width: 250px;
  background: rgba(15, 22, 33, .78); border: 1px solid rgba(60, 207, 245, .22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  color: #DCE6F0; font-size: var(--fs-sm); line-height: 1.35;
  animation: hx-flota 7s ease-in-out infinite;
}
.hx__tarjeta small { display: block; color: #7F92A8; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.hx__tarjeta .ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(26,184,232,.28), rgba(20,121,179,.28)); color: #7DE3FF;
}
.hx__tarjeta--wa .ico { background: rgba(37, 211, 102, .16); color: #4ADE80; }
.hx__tarjeta--a { top: 6%; left: -2%; }
.hx__tarjeta--b { top: 44%; right: -4%; animation-delay: -2.5s; }
.hx__tarjeta--c { bottom: 4%; left: 6%; animation-delay: -4.5s; }
@media (max-width: 560px) {
  .hx__tarjeta { max-width: 210px; padding: 10px 12px; }
  .hx__tarjeta--a { left: 0; top: 0; }
  .hx__tarjeta--b { right: 0; }
  .hx__tarjeta--c { left: 0; bottom: 0; }
}
/* Onda de voz animada */
.onda { display: inline-flex; gap: 3px; align-items: center; height: 18px; margin-top: 4px; }
.onda i { width: 3px; border-radius: 2px; background: #3CCFF5; animation: onda 1.1s ease-in-out infinite; }
.onda i:nth-child(1) { height: 30%; } .onda i:nth-child(2) { height: 80%; animation-delay: -.2s; }
.onda i:nth-child(3) { height: 55%; animation-delay: -.4s; } .onda i:nth-child(4) { height: 100%; animation-delay: -.6s; }
.onda i:nth-child(5) { height: 45%; animation-delay: -.8s; } .onda i:nth-child(6) { height: 70%; animation-delay: -1s; }
@keyframes onda { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* La imagen reemplazable del hero: si el administrador sube una, reemplaza
   al robot; mientras tanto se muestra la ilustración de referencia. */
.hx__slot { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; opacity: 0; pointer-events: none; }
.hx__slot img { width: 100%; height: 100%; object-fit: cover; }
.hx__slot img[data-propia="true"] { opacity: 1; }
.hx__visual:has(.hx__slot img[data-propia="true"]) .hx__slot { opacity: 1; pointer-events: auto; }
.hx__visual:has(.hx__slot img[data-propia="true"]) .hx__robot,
.hx__visual:has(.hx__slot img[data-propia="true"]) .hx__orbita { display: none; }
body.img-edit-mode .hx__slot { opacity: 1; pointer-events: auto; }

/* --------------------------- CANALES ------------------------------- */
.canales-x {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.canales-x__fila {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  padding: 26px 0; color: var(--text-muted);
}
.canales-x__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .02em;
}
.canales-x__item svg { color: var(--primary); }

/* ------------------------ TÍTULOS DE SECCIÓN ------------------------ */
.titulo-x { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.titulo-x--izq { margin-left: 0; text-align: left; }
.titulo-x h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -0.02em; margin: 12px 0 14px; }
.titulo-x p { color: var(--text-soft); font-size: var(--fs-lg); line-height: 1.7; margin: 0; }
.degradado {
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------- PRODUCTOS ------------------------------ */
.productos-nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
@media (max-width: 900px) { .productos-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .productos-nav { grid-template-columns: 1fr; } }
.producto-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.producto-tile::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.producto-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--brand-300); color: var(--text); }
:root[data-theme="dark"] .producto-tile:hover { border-color: var(--border-strong); box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(60,207,245,.12); }
.producto-tile:hover::before { transform: scaleX(1); }
.producto-tile .icon-pill { width: 46px; height: 46px; }
.producto-tile h3 { margin: 4px 0 0; font-size: var(--fs-xl); }
.producto-tile h3 small { display: block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.producto-tile p { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.6; flex: 1; }
.producto-tile__mas { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: var(--fs-sm); color: var(--link); }

.producto {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.producto + .producto { margin-top: clamp(64px, 8vw, 112px); }
.producto--inv > :first-child { order: 2; }
@media (max-width: 900px) {
  .producto { grid-template-columns: 1fr; }
  .producto--inv > :first-child { order: 0; }
}
.producto > * { min-width: 0; }
.producto__marca {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-brand-soft);
}
.producto__marca .icon-pill { width: 34px; height: 34px; }
.producto h3 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.35rem); letter-spacing: -0.02em; margin: 0 0 14px; }
.producto h3 span { color: var(--primary); }
.producto__texto { color: var(--text-soft); font-size: var(--fs-md); line-height: 1.75; margin: 0 0 6px; }
.producto .lista-check { margin-top: 22px; }
.producto__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

.marco-x {
  position: relative; border-radius: var(--r-2xl); padding: 10px;
  background: linear-gradient(145deg, rgba(60,207,245,.35), rgba(20,121,179,.08) 40%, rgba(60,207,245,.18));
  box-shadow: var(--shadow-xl);
}
.marco-x::after {
  content: ''; position: absolute; inset: -30px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent); opacity: .35;
}
.marco-x .img-slot { border-radius: calc(var(--r-2xl) - 8px); aspect-ratio: 4 / 3; background: #0B111A; }

/* ---------------------------- NOSOTROS ------------------------------ */
.nosotros-x { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .nosotros-x { grid-template-columns: 1fr; } }
.nosotros-x > * { min-width: 0; }
.nosotros-x p { color: var(--text-soft); font-size: var(--fs-md); line-height: 1.8; }
.cita-x {
  margin: 26px 0 0; padding: 20px 24px; border-radius: var(--r-lg);
  border-left: 3px solid var(--accent-500);
  background: var(--surface-brand); color: var(--text); font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600; line-height: 1.5;
}

.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(48px, 6vw, 72px); }
@media (max-width: 760px) { .mv { grid-template-columns: 1fr; } }
.mv__card {
  position: relative; overflow: hidden; padding: 32px 30px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
}
.mv__card--oscura {
  background: linear-gradient(150deg, #121A26 0%, #0B111A 60%, #0E2232 100%);
  border-color: rgba(60,207,245,.18); color: #C2CFDD;
}
.mv__card--oscura h3 { color: #fff; }
.mv__card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: var(--fs-xl); }
.mv__card p { margin: 0; line-height: 1.75; }
.mv__card .icon-pill { width: 42px; height: 42px; }
.mv__card--oscura .icon-pill { background: rgba(26,184,232,.14); color: var(--accent-300); border-color: rgba(60,207,245,.25); }
.mv__card::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 70%); opacity: .35; pointer-events: none;
}

.valores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
@media (max-width: 1000px) { .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .valores { grid-template-columns: 1fr; } }
.valor {
  padding: 24px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.valor:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.valor__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary); letter-spacing: .1em; }
.valor h4 { margin: 10px 0 8px; font-size: var(--fs-md); }
.valor p { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; }

/* ----------------------------- POR QUÉ ------------------------------ */
.porque-x {
  position: relative; overflow: hidden; color: #C2CFDD;
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(31,150,211,.22), transparent 60%),
    radial-gradient(700px 380px at 100% 100%, rgba(26,184,232,.14), transparent 60%),
    linear-gradient(170deg, #0F1621 0%, #070B11 100%);
}
.porque-x::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 80%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 80%);
}
.porque-x > .container { position: relative; }
.porque-x h2, .porque-x h3 { color: #fff; }
.porque-x .titulo-x p { color: #9FB0C3; }
.porque-x .eyebrow { color: var(--accent-300); }
.porque-x .eyebrow::before { background: var(--accent-400); }

.razones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .razones { grid-template-columns: 1fr; } }
.razon {
  position: relative; padding: 30px 28px; border-radius: var(--r-xl);
  background: rgba(255,255,255,.03); border: 1px solid rgba(60,207,245,.14);
  backdrop-filter: blur(6px);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.razon:hover { border-color: rgba(60,207,245,.4); transform: translateY(-4px); background: rgba(26,184,232,.05); }
.razon__ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  color: #03202E; background: linear-gradient(135deg, #7DE3FF, #1AB8E8);
  box-shadow: 0 10px 26px rgba(26,184,232,.35);
}
.razon h3 { font-size: var(--fs-lg); margin: 0 0 10px; }
.razon p { margin: 0; line-height: 1.7; font-size: var(--fs-base); }

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 6vw, 72px); counter-reset: paso; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr; gap: 26px; } }
.paso { position: relative; padding: 0 26px 0 0; }
.paso::before {
  counter-increment: paso; content: '0' counter(paso);
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
  background: linear-gradient(180deg, #7DE3FF, rgba(26,184,232,.15));
  -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px;
}
.paso::after {
  content: ''; position: absolute; top: 20px; left: 72px; right: 20px; height: 1px;
  background: linear-gradient(90deg, rgba(60,207,245,.5), transparent);
}
.paso:last-child::after { display: none; }
@media (max-width: 900px) { .paso::after { display: none; } }
.paso h4 { color: #fff; margin: 0 0 8px; font-size: var(--fs-md); }
.paso p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: #9FB0C3; }

/* ----------------------------- SOPORTE ------------------------------ */
.soporte-x {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center;
  padding: clamp(28px, 4vw, 48px); border-radius: var(--r-2xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
@media (max-width: 900px) { .soporte-x { grid-template-columns: 1fr; } }
.soporte-x > * { min-width: 0; }
.soporte-x .img-slot { border-radius: var(--r-xl); aspect-ratio: 10 / 7; background: #0B111A; }
.soporte-x h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 10px 0 12px; }
.soporte-x p { color: var(--text-soft); line-height: 1.7; }
.sla-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 26px; }
.sla-mini div {
  display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-soft); font-size: var(--fs-sm);
}
.sla-mini svg { color: var(--primary); flex: none; }

/* ----------------------------- CONTACTO ----------------------------- */
.contacto-x { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contacto-x { grid-template-columns: 1fr; } }
.contacto-x > * { min-width: 0; }
.contacto-x__info p { color: var(--text-soft); line-height: 1.75; }
.contacto-datos { display: grid; gap: 12px; margin-top: 26px; }
.contacto-dato {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.contacto-dato:hover { border-color: var(--brand-300); color: var(--text); }
.contacto-dato small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.contacto-dato strong { font-weight: 600; word-break: break-word; }
.formulario-x {
  padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r-2xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  position: relative;
}
.formulario-x::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(60,207,245,.55), transparent 35%, transparent 70%, rgba(31,150,211,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.formulario-x h3 { margin: 0 0 6px; font-size: var(--fs-xl); }
.formulario-x .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-x .consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-soft); }
.formulario-x .consentimiento input { margin-top: 3px; }
.formulario-x__ok { text-align: center; padding: 30px 10px; }
.formulario-x__ok .icon-pill { width: 64px; height: 64px; margin: 0 auto 16px; }

/* ------------------------- CTA FINAL ------------------------------- */
.cta-x {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: var(--r-2xl);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(60,207,245,.35), transparent 70%),
    linear-gradient(135deg, #0B2639 0%, #125F8C 55%, #1479B3 100%);
  color: #DCEBF6;
}
.cta-x h2 { color: #fff; margin: 0 0 12px; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); }
.cta-x p { max-width: 620px; margin: 0 auto 28px; font-size: var(--fs-lg); line-height: 1.6; }
.cta-x .row { justify-content: center; flex-wrap: wrap; }

/* --------------- Animación de entrada (respeta reducción) ----------- */
@media (prefers-reduced-motion: reduce) {
  .hx__circuito .pulso, .hx__luz, .hx__orbita--2, .hx__robot, .hx__tarjeta, .onda i { animation: none !important; }
}