/* ============================================================================
   KONDORY — LIBRERIA DE COMPONENTES (svx-)
   ----------------------------------------------------------------------------
   Bloques compartidos por todas las vistas publicas rediseñadas (v3). Se
   apoyan en los tokens y botones de kondory-ui.css. Guia de uso y catalogo:
   docs/DESIGN-SYSTEM.md. Lo exclusivo de una vista va en assets/css/pages/.

   Criterio: cada seccion tiene una forma propia; nunca rejillas de tarjetas
   identicas encadenadas ni etiquetas que repitan el titulo.
     - Hero con mockup vivo del software (HTML, no imagen)
     - Definicion + foto real
     - Lista editorial numerada con cabecera fija
     - Checklist interactivo
     - Enunciados grandes sobre navy
     - Linea de tiempo con progreso
     - Estimador con resultado en vivo
   ============================================================================ */

:root {
  --svx-green: #16a34a;
  --svx-amber: #d97706;
  --svx-radius: 16px;
  --svx-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------------------
   1. Hero: copia a la izquierda, mockup a la derecha
   --------------------------------------------------------------------------- */
.svx-hero { padding-bottom: 88px; }

.svx-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

@media (min-width: 1100px) {
  .svx-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 64px; }
}

.svx-hero h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); }

.svx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--kdx-line-dark);
}

.svx-fact dt {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.1;
}

.svx-fact dd {
  margin: 6px 0 0;
  font-size: .86rem;
  color: #8fa6c8;
}

/* --- Mockup ------------------------------------------------------------- */
.svx-mock {
  position: relative;
  padding: 18px 0 28px;
  font-family: 'Open Sans', system-ui, sans-serif;
}

.svx-mock__win {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 90px rgba(3, 8, 24, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: none;
  transform-origin: left center;
  transition: transform .8s var(--svx-ease);
}

/* v4 corporativo: el mockup va plano, sin giro 3D ni efecto al pasar el puntero */

.svx-mock__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #eef2f8;
  border-bottom: 1px solid #e1e7f0;
}

.svx-mock__dots { display: flex; gap: 6px; }
.svx-mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: #cfd7e4; }
.svx-mock__dots i:first-child { background: #f87171; }
.svx-mock__dots i:nth-child(2) { background: #fbbf24; }
.svx-mock__dots i:last-child { background: #34d399; }

.svx-mock__url {
  flex: 1;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 7px;
  background: #fff;
  font-size: .7rem;
  color: #6b7a93;
}

.svx-mock__url i { font-size: .62rem; color: var(--svx-green); }

.svx-mock__body {
  display: grid;
  grid-template-columns: 148px 1fr;
  min-height: 330px;
}

.svx-mock__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  background: #0e1b3d;
}

.svx-mock__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 6px 14px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
}

.svx-mock__brand i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--kdx-blue);
  font-size: .72rem;
}

.svx-mock__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: .72rem;
  color: #8fa6c8;
}

.svx-mock__nav.is-on { background: rgba(56, 189, 248, .12); color: #fff; }
.svx-mock__nav i { font-size: .74rem; }

.svx-mock__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f6f8fc;
  min-width: 0;
}

.svx-mock__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.svx-mock__kpi {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e6ebf3;
}

.svx-mock__kpi span {
  display: block;
  font-size: .62rem;
  color: #7a8aa3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svx-mock__kpi strong {
  display: block;
  margin-top: 4px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.05rem;
  color: var(--kdx-ink);
  letter-spacing: -.02em;
}

.svx-mock__chart {
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e6ebf3;
}

.svx-mock__label { font-size: .64rem; font-weight: 600; color: #4a5a75; }

.svx-mock__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 74px;
  margin-top: 10px;
}

.svx-mock__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, #60a5fa, var(--kdx-blue));
  transform-origin: bottom;
}

.svx-mock__bars i:last-child { background: linear-gradient(180deg, var(--kdx-cyan), #0ea5e9); }

.svx-mock__rows {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e6ebf3;
}

.svx-mock__rows li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: .68rem;
  color: #4a5a75;
}

.svx-mock__rows li + li { border-top: 1px solid #eef2f7; }
.svx-mock__code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #7a8aa3; }
.svx-mock__name { color: var(--kdx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.svx-pill {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 600;
  white-space: nowrap;
}

.svx-pill--ok { background: #dcfce7; color: #15803d; }
.svx-pill--run { background: #dbeafe; color: #1d4ed8; }
.svx-pill--wait { background: #fef3c7; color: #b45309; }
.svx-pill--bad { background: #fee2e2; color: #b91c1c; }

/* Avisos flotantes: dan la sensacion de sistema en uso */
.svx-mock__toast,
.svx-mock__sync {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 600;
  box-shadow: 0 18px 40px rgba(3, 8, 24, .35);
}

.svx-mock__toast {
  right: -14px;
  bottom: -6px;
  background: #fff;
  color: var(--kdx-ink);
}

.svx-mock__toast i { font-size: 1.1rem; color: var(--svx-green); }

.svx-mock__sync {
  left: -26px;
  bottom: 96px;
  background: rgba(14, 27, 61, .92);
  color: #dbe7fb;
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.svx-mock__pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
}

.svx-mock__pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #34d399;
  animation: none;
  display: none;
}

@keyframes svx-pulse {
  from { transform: scale(.6); opacity: .9; }
  to { transform: scale(1.8); opacity: 0; }
}

@media (max-width: 1099px) {
  .svx-mock { max-width: 640px; }
  .svx-mock__win { transform: none; }
  .svx-mock:hover .svx-mock__win { transform: none; }
}

@media (max-width: 575px) {
  .svx-hero { padding-bottom: 56px; }
  .svx-facts { gap: 20px 28px; }
  .svx-fact dt { font-size: 1.25rem; }
  .svx-mock__body { grid-template-columns: 1fr; min-height: 0; }
  .svx-mock__side { display: none; }
  .svx-mock__main { padding: 12px; }
  .svx-mock__kpi strong { font-size: .9rem; }
  .svx-mock__sync { display: none; }
  .svx-mock__toast { right: 8px; font-size: .72rem; }
}

/* ---------------------------------------------------------------------------
   2. Definicion + foto
   --------------------------------------------------------------------------- */
.svx-what__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

@media (min-width: 992px) {
  .svx-what__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
}

/* La definicion inline se presenta como texto de articulo, sin caja */
.svx-what .kdx-definition--inline {
  margin: 0 0 26px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* custom.css fuerza 1.06rem !important en la definicion inline; aqui es el
   titular de la seccion, asi que se recupera el tamano con el mismo ancla. */
.main-wrapper .svx-what .kdx-definition--inline h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem) !important;
  line-height: 1.16;
  letter-spacing: -.025em;
  max-width: 18ch;
  margin-bottom: 20px;
}

.svx-what .kdx-definition--inline p {
  font-size: 1.06rem;
  padding-left: 20px;
  border-left: 2px solid var(--kdx-blue);
  color: var(--kdx-body);
}

.svx-photo {
  position: relative;
  margin: 0;
  border-radius: var(--svx-radius);
  overflow: hidden;
  background: var(--kdx-line);
  box-shadow: var(--kdx-shadow);
}

.svx-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   3. Que hacemos: lista editorial con cabecera fija
   --------------------------------------------------------------------------- */
.svx-do {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .svx-do { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
  .svx-do__head { position: sticky; top: 120px; align-self: start; }
}

.svx-do__head .kdx-lead { margin-top: 16px; }
.svx-do__ask { margin-top: 26px; }

.svx-do__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kdx-line);
}

.svx-do__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 44px 1fr;
  gap: 18px;
  align-items: start;
  padding: 28px 8px 28px 0;
  border-bottom: 1px solid var(--kdx-line);
  scroll-margin-top: 120px;
}

/* Barra de acento que entra desde la izquierda al pasar el puntero */
.svx-do__item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--kdx-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--svx-ease);
}

.svx-do__item:hover::before { transform: scaleX(1); }

.svx-do__n {
  padding-top: 10px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--kdx-muted);
  font-variant-numeric: tabular-nums;
}

.svx-do__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--kdx-line);
  color: var(--kdx-blue);
  font-size: 1.12rem;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.svx-do__item:hover .svx-do__icon { background: var(--kdx-blue); border-color: var(--kdx-blue); color: #fff; }

.svx-do__title {
  margin: 8px 0 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kdx-ink);
}

.svx-do__desc {
  margin: 0;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--kdx-body);
}

@media (max-width: 575px) {
  .svx-do__item { grid-template-columns: 44px 1fr; gap: 14px; }
  .svx-do__n { display: none; }
}

/* ---------------------------------------------------------------------------
   4. Para quien: checklist interactivo
   --------------------------------------------------------------------------- */
.svx-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .svx-fit { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
}

.svx-fit__head .kdx-lead { margin-top: 16px; }

.svx-fit__list {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.svx-fit__opt {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--kdx-line);
  background: #fff;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, transform .25s var(--svx-ease);
}

.svx-fit__opt:hover { border-color: rgba(37, 99, 235, .45); }
.svx-fit__opt input { position: absolute; opacity: 0; pointer-events: none; }

.svx-fit__box {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 8px;
  border: 1.5px solid #c3cfe0;
  color: transparent;
  font-size: 1rem;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.svx-fit__txt { font-size: 1.04rem; line-height: 1.5; color: var(--kdx-ink); }

.svx-fit__opt:has(input:checked) { border-color: var(--kdx-blue); background: #f3f7ff; }
.svx-fit__opt input:checked + .svx-fit__box { background: var(--kdx-blue); border-color: var(--kdx-blue); color: #fff; }
.svx-fit__opt input:focus-visible + .svx-fit__box { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: 2px; }

.svx-fit__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--kdx-paper);
  border: 1px dashed #c9d5e6;
}

.svx-fit__result p { flex: 1 1 260px; margin: 0; font-size: .98rem; color: var(--kdx-body); }

.svx-fit__meter {
  flex: 0 0 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--kdx-line);
  overflow: hidden;
}

.svx-fit__meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kdx-blue), var(--kdx-cyan));
  transition: width .6s var(--svx-ease);
}

.svx-fit__result.is-hot { border-style: solid; border-color: rgba(37, 99, 235, .35); background: #f3f7ff; }
.svx-fit__result.is-hot p { color: var(--kdx-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   5. Cuando conviene: enunciados grandes sobre navy
   --------------------------------------------------------------------------- */
.svx-when {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

@media (min-width: 992px) {
  .svx-when { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
}

.svx-when__list { margin: 0; padding: 0; list-style: none; }

.svx-when__list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--kdx-line-dark);
}

.svx-when__list li:first-child { padding-top: 0; }

.svx-when__n {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: var(--kdx-cyan);
}

.svx-when__list p {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   6. Proceso: linea de tiempo + foto que cambia
   --------------------------------------------------------------------------- */
.svx-proc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 992px) {
  .svx-proc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
  .svx-proc__media { position: sticky; top: 120px; align-self: start; }
}

.svx-proc__track { position: relative; }

.svx-proc__rail {
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--kdx-line);
}

.svx-proc__rail span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--kdx-blue), var(--kdx-cyan));
  transform-origin: top;
}

.svx-proc__steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svx-proc__step {
  position: relative;
  padding: 0 0 52px 76px;
  min-height: 120px;
}

.svx-proc__step:last-child { padding-bottom: 0; min-height: 0; }

.svx-proc__dot {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kdx-line);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  color: var(--kdx-muted);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}

.svx-proc__step.is-on .svx-proc__dot {
  background: var(--kdx-blue);
  border-color: var(--kdx-blue);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .12);
}

.svx-proc__step h3 {
  margin: 8px 0 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kdx-ink);
}

.svx-proc__step p { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.68; color: var(--kdx-body); }

.svx-proc__media { display: grid; }

.svx-proc__photo {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .7s ease, transform .9s var(--svx-ease);
}

.svx-proc__photo.is-on { opacity: 1; transform: none; }

.svx-proc__photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 15, 36, .78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 991px) {
  .svx-proc__media { order: -1; }
}

/* ---------------------------------------------------------------------------
   7. Estimador
   --------------------------------------------------------------------------- */
.svx-est {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
}

@media (min-width: 992px) {
  .svx-est { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
  .svx-est__out { position: sticky; top: 110px; }
}

.svx-est__form {
  padding: 8px 32px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kdx-line);
  box-shadow: var(--kdx-shadow);
}

.svx-est__q {
  margin: 0;
  padding: 28px 0;
  border: 0;
  min-width: 0;
}

.svx-est__q + .svx-est__q { border-top: 1px solid var(--kdx-line); }

.svx-est__q legend {
  display: flex;
  align-items: center;
  gap: 12px;
  /* float + ancho completo: asi el legend no se dibuja sobre el borde del
     fieldset (comportamiento nativo) y respeta el padding. */
  float: left;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--kdx-ink);
}

.svx-est__q legend span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kdx-ink);
  color: #fff;
  font-size: .8rem;
}

.svx-est__q legend + * { clear: left; }

.svx-est__help { margin: 12px 0 0; font-size: .86rem; color: var(--kdx-muted); }

/* Tarjetas de tipo de proyecto */
.svx-est__types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.svx-choice { position: relative; cursor: pointer; margin: 0; }
.svx-choice input { position: absolute; opacity: 0; pointer-events: none; }

.svx-choice__in {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1.5px solid var(--kdx-line);
  background: #fff;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.svx-choice__in i { font-size: 1.2rem; color: var(--kdx-blue); }
.svx-choice__in strong { font-family: 'Poppins', system-ui, sans-serif; font-size: .9rem; font-weight: 600; color: var(--kdx-ink); line-height: 1.3; }
.svx-choice__in small { font-size: .78rem; line-height: 1.45; color: var(--kdx-muted); }

.svx-choice:hover .svx-choice__in { border-color: rgba(37, 99, 235, .45); }
.svx-choice input:checked + .svx-choice__in { border-color: var(--kdx-blue); background: #f3f7ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.svx-choice input:focus-visible + .svx-choice__in { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: 2px; }

/* Rango */
.svx-range { display: flex; align-items: center; gap: 18px; }

.svx-range input {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  -webkit-appearance: none;
          appearance: none;
  background: linear-gradient(90deg, var(--kdx-blue) var(--fill, 22%), var(--kdx-line) var(--fill, 22%));
  cursor: pointer;
}

.svx-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kdx-blue);
  box-shadow: 0 2px 8px rgba(11, 20, 40, .2);
}

.svx-range input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kdx-blue);
}

.svx-range output {
  min-width: 46px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--kdx-paper);
  border: 1px solid var(--kdx-line);
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  color: var(--kdx-ink);
}

/* Chips de integraciones */
.svx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.svx-chip { position: relative; margin: 0; cursor: pointer; }
.svx-chip input { position: absolute; opacity: 0; pointer-events: none; }

.svx-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--kdx-line);
  background: #fff;
  font-size: .88rem;
  color: var(--kdx-body);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.svx-chip:hover span { border-color: rgba(37, 99, 235, .45); }
.svx-chip input:checked + span { border-color: var(--kdx-blue); background: var(--kdx-blue); color: #fff; }
.svx-chip input:focus-visible + span { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: 2px; }

/* Segmentado de usuarios */
.svx-seg {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 12px;
  background: var(--kdx-paper);
  border: 1px solid var(--kdx-line);
}

.svx-seg label { position: relative; margin: 0; cursor: pointer; }
.svx-seg input { position: absolute; opacity: 0; pointer-events: none; }

.svx-seg span {
  display: block;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--kdx-body);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.svx-seg input:checked + span { background: #fff; color: var(--kdx-ink); box-shadow: 0 1px 4px rgba(11, 20, 40, .12); }
.svx-seg input:focus-visible + span { outline: 3px solid rgba(56, 189, 248, .55); }

/* Resultado */
.svx-est__out {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px;
  border-radius: 20px;
  color: #dbe5f6;
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(56, 189, 248, .18), transparent 60%),
    linear-gradient(160deg, var(--kdx-navy) 0%, #0e1f4a 100%);
  box-shadow: var(--kdx-shadow-lg);
}

.svx-est__olabel { font-size: .84rem; color: #8fa6c8; }

.svx-est__big {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.1rem;
  color: #b8c9e4;
}

.svx-est__big strong {
  display: inline-block;
  font-size: clamp(2.6rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.svx-est__timeline {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}

.svx-est__mvp { width: 40%; background: var(--kdx-cyan); transition: width .5s var(--svx-ease); }
.svx-est__rest { flex: 1; background: linear-gradient(90deg, var(--kdx-blue), rgba(37, 99, 235, .45)); }

.svx-est__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 0;
}

.svx-est__facts div {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--kdx-line-dark);
}

.svx-est__facts dt { font-size: .76rem; font-weight: 400; color: #8fa6c8; }
.svx-est__facts dt::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--kdx-cyan); }
.svx-est__facts div + div dt::before { background: var(--kdx-blue); }
.svx-est__facts dd { margin: 4px 0 0; font-family: 'Poppins', system-ui, sans-serif; font-size: 1.1rem; font-weight: 600; color: #fff; }

.svx-est__note { margin: 0; font-size: .8rem; line-height: 1.55; color: #8fa6c8; }

.svx-est__out .kdx-btn { width: 100%; }

.svx-btn-wa {
  background: #25d366;
  color: #062b14;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .28);
}

.svx-btn-wa:hover,
.svx-btn-wa:focus-visible { color: #062b14; background: #2fe073; transform: translateY(-2px); }

/* Cambio de cifra: pequeño salto para que el visitante note la actualizacion */
.svx-bump { animation: svx-bump .45s var(--svx-ease); }

@keyframes svx-bump {
  0% { transform: translateY(6px); opacity: .3; }
  100% { transform: none; opacity: 1; }
}

@media (max-width: 575px) {
  .svx-est__form { padding: 4px 18px; border-radius: 16px; }
  .svx-est__types { grid-template-columns: 1fr 1fr; }
  .svx-seg { display: flex; }
  .svx-seg label { flex: 1; }
  .svx-seg span { padding: 9px 8px; text-align: center; font-size: .8rem; }
  .svx-est__out { padding: 24px 20px; }
}

/* ---------------------------------------------------------------------------
   Movimiento reducido
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .svx-mock__win,
  .svx-do__item::before,
  .svx-proc__photo,
  .svx-fit__meter span,
  .svx-est__mvp { transition: none; }
  .svx-mock__pulse::after,
  .svx-bump { animation: none; }
}

/* ===========================================================================
   v4 CORPORATIVO
   ---------------------------------------------------------------------------
   Criterio del rediseño v4 (ver docs/DESIGN-SYSTEM.md): sobrio y corporativo.
   Un solo color de acento, fotos reales protagonistas, mockups planos y sin
   avisos flotantes, movimiento minimo (una entrada suave).
   =========================================================================== */

/* Los avisos flotantes de los mockups (toast / sync) se retiran en todo el
   sitio: recargaban la imagen y la hacian parecer una demo. */
.svx-mock__toast,
.svx-mock__sync { display: none !important; }

.svx-mock__win { box-shadow: 0 24px 60px rgba(3, 8, 24, .28), 0 0 0 1px rgba(11, 20, 40, .08); }

/* ---------------------------------------------------------------------------
   Encabezado de vista (.svx-chero) — paginas internas
   ---------------------------------------------------------------------------
   El hero grande con foto es SOLO del inicio (.hx5). Las demas vistas llevan
   un encabezado compacto: fondo navy con migas, titulo, descripcion corta
   y acciones. Sin foto ni franja de datos.

   <section class="svx-chero">
     <div class="container svx-chero__inner"><div class="svx-chero__copy">
       <nav aria-label="..."><ol class="kdx-crumbs">...</ol></nav>
       <h1 class="svx-chero__title">Titulo <span>segunda linea opcional</span></h1>
       <p class="svx-chero__lead">...</p>
       <div class="svx-chero__actions">1-2 botones kdx-btn</div>
     </div></div>
   </section>
   --------------------------------------------------------------------------- */
.svx-chero {
  position: relative;
  overflow: hidden;
  padding-top: 80px; /* header fijo */
  color: #fff;
  background:
    radial-gradient(800px 360px at 92% 0%, rgba(37, 99, 235, .22), transparent 65%),
    linear-gradient(160deg, var(--kdx-navy) 0%, #0c1835 100%);
}

/* Reticula tenue a la derecha para dar profundidad al fondo */
.svx-chero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}

/* Restos del hero con foto: ya no se usan en vistas internas */
.svx-chero__photo,
.svx-chero__card { display: none !important; }

.svx-chero__inner { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 40px; }

.svx-chero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 56px;
  align-items: end;
}

@media (min-width: 992px) {
  /* Dos columnas solo si hay acciones; el resto siempre va en la primera */
  .svx-chero__copy:has(> .svx-chero__actions) { grid-template-columns: minmax(0, 1fr) auto; }
  .svx-chero__copy > :not(nav):not(.svx-chero__actions) { grid-column: 1; }
  .svx-chero__copy > nav { grid-column: 1 / -1; }
  .svx-chero__copy > .svx-chero__actions { grid-column: 2; grid-row: 2 / span 3; align-self: end; margin-top: 0; }
}

.svx-chero .kdx-crumbs { margin-bottom: 18px; }

.svx-chero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: .86rem;
  font-weight: 600;
  color: #93c5fd;
}

.svx-chero__eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--kdx-blue); }

.main-wrapper .svx-chero .svx-chero__title,
.svx-chero .svx-chero__title {
  margin: 0;
  max-width: 30ch;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.75rem, 2.8vw, 2.45rem) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #fff;
  text-wrap: balance;
}

.svx-chero__title span {
  display: block;
  margin-top: 6px;
  font-size: .62em;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #a9bbdb;
}

.svx-chero__lead { margin: 14px 0 0; max-width: 66ch; font-size: 1.02rem; line-height: 1.7; color: #b3c3e0; }
.svx-chero__lead strong { color: #fff; font-weight: 600; }

.svx-chero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.svx-chero__actions .kdx-btn { padding: 13px 22px; }

.svx-chero__copy > * { animation: svx-chero-in .6s cubic-bezier(.16, 1, .3, 1) both; }
.svx-chero__copy > :nth-child(2) { animation-delay: .04s; }
.svx-chero__copy > :nth-child(3) { animation-delay: .08s; }
.svx-chero__copy > :nth-child(4) { animation-delay: .12s; }

@keyframes svx-chero-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 991px) {
  .svx-chero__inner { padding-top: 32px; padding-bottom: 30px; }
}

@media (max-width: 575px) {
  .svx-chero__actions .kdx-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .svx-chero__copy > * { animation: none; }
}

/* ---------------------------------------------------------------------------
   Seccion "Asi se ve" (.svx-showcase): el mockup del producto fuera del hero,
   plano, en un marco claro, con texto al lado.
   <div class="svx-showcase"><div>kicker + h2 + lead + lista</div>
     <div class="svx-showcase__frame"><div class="svx-mock">...</div></div></div>
   --------------------------------------------------------------------------- */
.svx-showcase { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 992px) { .svx-showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.svx-showcase .svx-mock { padding: 0; max-width: none; }
.svx-showcase__frame { padding: 14px; border-radius: 20px; background: var(--kdx-paper); border: 1px solid var(--kdx-line); }
.svx-showcase__note { margin: 14px 0 0; font-size: .8rem; color: var(--kdx-muted); }

/* Variante de lectura (articulo del blog, politica de privacidad): sin foto. */
.svx-chero--doc { min-height: 0; }
.svx-chero--doc .svx-chero__copy { max-width: 54rem; }

/* ---------------------------------------------------------------------------
   Foto de fondo del encabezado de vista (.svx-chero__bg)
   ---------------------------------------------------------------------------
   Foto real del sector bajo un velo navy (denso a la izquierda, donde va el
   texto; mas abierto a la derecha). kdx-components.js la mueve un poco con
   el scroll (parallax) y con el puntero; al cargar hace un acercamiento lento.
   --------------------------------------------------------------------------- */
.svx-chero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.svx-chero__bg img {
  position: absolute;
  inset: -6% -4%;
  width: 108%;
  height: 112%;
  object-fit: cover;
  object-position: center 35%;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.04);
  animation: svx-chero-bg-in 2.2s cubic-bezier(.16, 1, .3, 1) backwards;
  will-change: transform;
}

@keyframes svx-chero-bg-in {
  from { opacity: 0; transform: translate3d(0, 0, 0) scale(1.14); }
}

.svx-chero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 15, 36, .97) 0%, rgba(8, 15, 36, .9) 38%, rgba(8, 15, 36, .62) 72%, rgba(8, 15, 36, .45) 100%),
    linear-gradient(0deg, rgba(8, 15, 36, .85) 0%, rgba(8, 15, 36, 0) 45%);
}

/* La reticula y el contenido van sobre la foto */
.svx-chero::before { z-index: 1; }
.svx-chero__inner { z-index: 2; }

@media (max-width: 767px) {
  .svx-chero__bg::after {
    background: linear-gradient(180deg, rgba(8, 15, 36, .82) 0%, rgba(8, 15, 36, .93) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svx-chero__bg img { animation: none; transform: none; }
}

/* ===========================================================================
   Encabezado de vista v7 (estandar): mismo lenguaje que el hero del inicio
   ---------------------------------------------------------------------------
   - Migas dentro de una pastilla (como la linea superior del inicio).
   - Segunda linea del titulo en azul claro.
   - Acciones debajo de la descripcion, botones redondeados.
   - Datos en una tarjeta blanca que flota sobre el borde inferior, que es una
     curva suave (como las cifras del inicio). En celular la tarjeta queda
     dentro del navy para no tapar la seccion siguiente.
   =========================================================================== */
.svx-chero {
  z-index: 2;
  overflow: visible; /* la tarjeta de datos sobresale; la foto se recorta en .svx-chero__bg */
  border-bottom-left-radius: 50% 48px;
  border-bottom-right-radius: 50% 48px;
}

.svx-chero::before,
.svx-chero__bg { border-radius: inherit; }

.svx-chero .kdx-crumbs {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(147, 197, 253, .28);
  border-radius: 999px;
  background: rgba(59, 130, 246, .12);
  font-size: .82rem;
}

.svx-chero .kdx-crumbs::before {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

.svx-chero__eyebrow {
  display: inline-flex;
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(147, 197, 253, .28);
  border-radius: 999px;
  background: rgba(59, 130, 246, .12);
  color: #bfdbfe;
}

.svx-chero__eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }

.svx-chero__title span { font-weight: 600; color: #93c5fd; }

/* Una sola columna: las acciones van debajo de la descripcion */
@media (min-width: 992px) {
  .svx-chero__copy:has(> .svx-chero__actions) { grid-template-columns: minmax(0, 1fr); }
  .svx-chero__copy > .svx-chero__actions { grid-column: 1; grid-row: auto; align-self: start; margin-top: 26px; }
}

.svx-chero__actions .kdx-btn { border-radius: 999px; padding: 13px 26px; }

@media (max-width: 991px) {
  .svx-chero { border-bottom-left-radius: 50% 28px; border-bottom-right-radius: 50% 28px; }
}

/* ---------------------------------------------------------------------------
   CTA final (.kcta) — assets/html/call-action.html
   ---------------------------------------------------------------------------
   Misma familia que los encabezados de vista: navy con foto de fondo bajo un
   velo, titular, una linea de apoyo y dos acciones.
   --------------------------------------------------------------------------- */
.kcta { padding: 24px 0 var(--kdx-y); background: var(--kdx-white); }
/* Si la pagina tiene preguntas frecuentes, el CTA va justo antes de ellas:
   sin el margen inferior de cierre, para no dejar un hueco doble. */
body:has(#faq) .kcta { padding-bottom: 24px; }

.kcta__box {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  padding: 56px 56px;
  border-radius: 22px;
  color: #fff;
  background: var(--kdx-navy);
  isolation: isolate;
}

@media (min-width: 992px) { .kcta__box { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

.kcta__bg { position: absolute; inset: 0; z-index: -1; }
.kcta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.kcta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 15, 36, .96) 0%, rgba(8, 15, 36, .88) 45%, rgba(8, 15, 36, .62) 100%);
}

.main-wrapper .kcta .kcta__title {
  margin: 0 0 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #fff;
}

.kcta__desc { margin: 0; max-width: 52ch; font-size: 1.04rem; line-height: 1.65; color: #c9d6ec; }

.kcta__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: .86rem;
  color: #8fa6c8;
}

.kcta__meta i { color: #93c5fd; }
.kcta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 575px) {
  .kcta__box { padding: 36px 24px; border-radius: 18px; }
  .kcta__actions .kdx-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Relacionados (Seo::relatedHtml) — v7: tarjetas (estandar de secciones)
   ---------------------------------------------------------------------------
   Cada enlace es una tarjeta blanca redondeada con icono, titulo y flecha
   (3 / 2 / 1 columnas), igual que las tarjetas de industrias del inicio.
   --------------------------------------------------------------------------- */
.kdx-related .kdx-related__list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 14px;
  border-top: 0;
}

@media (min-width: 768px) {
  .kdx-related .kdx-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .kdx-related .kdx-related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kdx-related .kdx-related__list > li,
.kdx-related .kdx-related__list > li:last-child:nth-child(3n + 1) { border-bottom: 0; grid-column: auto; }

.kdx-related a.kdx-related__card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 18px 44px 18px 18px;
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px -24px rgba(8, 15, 36, .35);
  transform: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.kdx-related a.kdx-related__card:hover {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 18px 36px -22px rgba(8, 15, 36, .4);
  transform: translateY(-2px);
}

.kdx-related .kdx-related__card .kdx-card__head { margin: 0; min-height: 0; }
.kdx-related .kdx-related__card .kdx-card__title { font-size: .96rem; font-weight: 600; line-height: 1.35; color: var(--kdx-ink); transition: color .2s ease; }
.kdx-related a.kdx-related__card:hover .kdx-card__title { color: var(--kdx-blue); }
.kdx-related .kdx-card__arrow { top: 50%; right: 16px; margin-top: -12px; }

@media (prefers-reduced-motion: reduce) {
  .kdx-related a.kdx-related__card, .kdx-related a.kdx-related__card:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   Ritmo de fondos al final de la pagina
   ---------------------------------------------------------------------------
   Relacionados sale en paper. Si la ultima seccion de contenido tambien es
   paper, quedaban dos paper seguidos: en ese caso relacionados pasa a blanco
   y las preguntas frecuentes a paper, para que la alternancia se mantenga.
   --------------------------------------------------------------------------- */
.kdx-section--paper + .kdx-related { background: var(--kdx-white); }
.kdx-section--paper + .kdx-related + .kdx-faq > .kdx-section { background: var(--kdx-paper); }

/* Videos y calendarios incrustados: fondo oscuro mientras cargan (antes era
   un recuadro blanco vacio). */
.kdx-embed { background: var(--kdx-navy-2); }

/* ===========================================================================
   Estandar de secciones v7 en los componentes svx- (referencia: el inicio y
   pagina-biomantenimiento). Las listas que eran filas con filete pasan a
   tarjetas redondeadas: borde 1px, radio 16px, fondo blanco y sombra suave;
   sobre navy, tarjetas de vidrio. Fotos con esquinas de 20px y paneles
   grandes con 24px. La linea de tiempo (svx-proc) y los mockups se conservan.
   Lo usan las paginas de servicio (assets/html/service-page.php) y las de
   producto (erp, pos, chatbot, rodamel...).
   =========================================================================== */
.svx-photo { border-radius: 20px; }
.svx-showcase__frame { border-radius: 24px; }
.svx-est__form,
.svx-est__out { border-radius: 24px; }

/* Tipos de proyecto del estimador: rejilla simetrica (3 + 2 en escritorio,
   2 + 2 + 1 a lo ancho en celular) en vez de 4 + 1 suelta. */
.svx-choice__in { border-radius: 14px; }

.svx-est__types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svx-est__types > .svx-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .svx-est__types { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svx-est__types > .svx-choice,
  .svx-est__types > .svx-choice:last-child:nth-child(odd) { grid-column: span 2; }
  .svx-est__types > .svx-choice:nth-child(4):nth-last-child(2),
  .svx-est__types > .svx-choice:nth-child(5):last-child { grid-column: span 3; }
}

/* --- Que hacemos (.svx-do): cada item es una tarjeta ---------------------- */
.svx-do__list {
  display: grid;
  gap: 12px;
  border-top: 0;
}

.svx-do__item {
  padding: 22px 24px;
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px -24px rgba(8, 15, 36, .35);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.svx-do__item::before { display: none; }

.svx-do__item:hover {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 18px 36px -22px rgba(8, 15, 36, .4);
  transform: translateY(-2px);
}

.svx-do__icon { background: #eaf1ff; border-color: transparent; }
.svx-do__item { grid-template-columns: 28px 44px 1fr; gap: 14px; }
.svx-do__title { margin-top: 6px; }

@media (max-width: 575px) {
  .svx-do__item { padding: 18px; }
}

/* --- Para quien (.svx-fit): mismas esquinas y sombra que el resto --------- */
.svx-fit__opt {
  border-radius: 16px;
  box-shadow: 0 12px 30px -24px rgba(8, 15, 36, .35);
}

.svx-fit__opt:hover { transform: translateY(-2px); }
.svx-fit__result { border-radius: 16px; }

/* --- Cuando conviene (.svx-when): una tarjeta por enunciado ---------------
   La especificidad (.kdx-section .svx-when ...) es a proposito: varias paginas
   tienen variantes (.svx-when--desc) que fijaban `padding: 26px 0` para las
   filas con filete; aqui la tarjeta necesita su relleno lateral. */
.svx-when__list { display: grid; gap: 12px; }

.kdx-section .svx-when .svx-when__list > li,
.kdx-section .svx-when .svx-when__list > li:first-child {
  grid-template-columns: 30px 1fr; /* el numero no necesita mas: sin hueco antes del texto */
  gap: 12px;
  padding: 22px 24px;
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px -24px rgba(8, 15, 36, .35);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.kdx-section .svx-when .svx-when__list > li:hover {
  border-color: rgba(37, 99, 235, .35);
  transform: translateY(-2px);
}

/* Sobre navy: vidrio */
.kdx-section--navy .svx-when .svx-when__list > li,
.kdx-section--navy .svx-when .svx-when__list > li:first-child {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
}

.kdx-section--navy .svx-when .svx-when__list > li:hover {
  border-color: rgba(147, 197, 253, .35);
  background: rgba(255, 255, 255, .07);
}

/* Fuera de navy el enunciado va en tinta, no en blanco */
.kdx-section:not(.kdx-section--navy) .svx-when__list p { color: var(--kdx-ink); }
.kdx-section:not(.kdx-section--navy) .svx-when__n { color: var(--kdx-blue); }

.svx-when__list p { font-size: clamp(1.06rem, 1.6vw, 1.26rem); }

@media (max-width: 575px) {
  .kdx-section .svx-when .svx-when__list > li,
  .kdx-section .svx-when .svx-when__list > li:first-child { grid-template-columns: 36px 1fr; gap: 12px; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .svx-do__item, .svx-do__item:hover,
  .kdx-section .svx-when .svx-when__list > li,
  .kdx-section .svx-when .svx-when__list > li:hover,
  .svx-fit__opt:hover { transition: none; transform: none; }
}

/* ===========================================================================
   Chat del asistente y botones flotantes — v7 (mismo lenguaje que el sitio)
   ---------------------------------------------------------------------------
   WhatsApp (verde) abajo a la izquierda y la burbuja del asistente
   (navy con anillo azul) abajo a la derecha. El globo de bienvenida es una tarjeta blanca como
   las del hero. La ventana del chat: cabecera navy, mensajes sobre gris claro,
   burbujas redondeadas, respuestas rapidas en pastilla y entrada redondeada.
   Los estilos base viven en custom.css ("CHAT BOOT MESSENGER").
   =========================================================================== */
.kfab-wa {
  position: fixed;
  z-index: 10;
  left: 22px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .65), 0 0 0 4px rgba(37, 211, 102, .15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.kfab-wa:hover,
.kfab-wa:focus-visible { color: #fff; transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 36px -10px rgba(37, 211, 102, .75), 0 0 0 6px rgba(37, 211, 102, .18); }
.kfab-wa:focus-visible { outline: 3px solid rgba(37, 211, 102, .5); outline-offset: 3px; }

/* Burbuja del asistente: aspecto de IA.
   - Borde de luz que gira (cian, azul y violeta) sobre el disco navy.
   - Halo que respira cambiando de color.
   - El icono flota en su sitio y un destello titila arriba a la derecha.
   (La animacion vieja .animacion corria el icono 8px a la derecha.) */
@property --kchat-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.chat_on {
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border: 2.5px solid transparent;
  background:
    linear-gradient(150deg, var(--kdx-navy, #080f24) 0%, #0d1a3e 58%, #0b2350 100%) padding-box,
    conic-gradient(from var(--kchat-a), #22d3ee, #2563eb, #8b5cf6, #ec4899, #22d3ee) border-box;
  box-shadow: 0 16px 34px -12px rgba(8, 15, 36, .7), 0 0 18px 2px rgba(34, 211, 238, .35);
  animation: kchat-spin 4s linear infinite, kchat-halo 6s ease-in-out infinite;
}

.chat_on:hover { transform: translateY(-2px) scale(1.05); }
.chat_on i { font-size: 26px; }

.chat_on .animacion {
  left: 0;
  top: 0;
  animation: kchat-float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, .55));
}

/* Destello de cuatro puntas */
.chat_on::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 8px;
  width: 11px;
  height: 11px;
  background: #e0f2fe;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px #67e8f9);
  animation: kchat-spark 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes kchat-spin { to { --kchat-a: 360deg; } }

@keyframes kchat-halo {
  0%, 100% { box-shadow: 0 16px 34px -12px rgba(8, 15, 36, .7), 0 0 16px 1px rgba(34, 211, 238, .35); }
  33% { box-shadow: 0 16px 34px -12px rgba(8, 15, 36, .7), 0 0 24px 4px rgba(37, 99, 235, .45); }
  66% { box-shadow: 0 16px 34px -12px rgba(8, 15, 36, .7), 0 0 22px 3px rgba(139, 92, 246, .4); }
}

@keyframes kchat-float {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(-2px); }
}

@keyframes kchat-spark {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  45%, 60% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* Globo de bienvenida: azul oscuro principal, de un solo color */
#tooltip_chat {
  right: 22px;
  bottom: 96px;
  max-width: 240px;
  padding: 12px 16px 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: var(--kdx-navy-2, #0e1b3d);
  color: #fff;
  text-align: left;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: 0 24px 50px -20px rgba(2, 8, 30, .7);
  animation: none;
}

#tooltip_chat::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .2);
  vertical-align: 1px;
}

#btnTool {
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  background: #fff;
  color: #64748b;
  box-shadow: 0 4px 12px rgba(2, 8, 30, .2), 0 0 0 1px var(--kdx-line, #e6ebf3);
}

#btnTool:hover { background: #f1f5f9; color: #0b1428; }

/* Ventana del chat */
#Smallchat .Layout { bottom: 22px; right: 22px; background: #080f24; }

#Smallchat .Layout-open {
  min-width: 380px;
  max-width: 380px;
  border-radius: 22px;
  box-shadow: 0 40px 90px -30px rgba(2, 8, 30, .6), 0 0 0 1px rgba(255, 255, 255, .06);
}

#Smallchat .Messenger_messenger { min-width: 380px; }

#Smallchat .Messenger_header {
  height: 72px;
  padding: 0 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0) 60%),
    linear-gradient(135deg, #080f24 0%, #0a1d52 100%);
  border-bottom: 0;
}

#Smallchat .Messenger_avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 20px;
}

#Smallchat .Messenger_prompt { font-family: 'Poppins', system-ui, sans-serif; font-size: .92rem; }
#Smallchat .Messenger_status { color: #bfdbfe; font-size: .74rem; }

.chat_close_icon { border-radius: 10px; }
.chat_close_icon:hover { background: rgba(255, 255, 255, .12); }

#Smallchat .Messenger_content,
#Smallchat .Messages { background: #f5f7fb; }

/* Burbujas */
.chat-msg-user {
  background: var(--kdx-blue, #2563eb);
  border-radius: 18px 18px 6px 18px;
  box-shadow: 0 10px 22px -14px rgba(37, 99, 235, .8);
}

.chat-msg-bot {
  border: 1px solid var(--kdx-line, #e6ebf3);
  border-radius: 18px 18px 18px 6px;
  box-shadow: 0 10px 22px -18px rgba(8, 15, 36, .35);
}

.chat-msg-user .chat-msg-name,
.chat-msg-bot .chat-msg-name { font-family: 'Poppins', system-ui, sans-serif; letter-spacing: .01em; }

/* Respuestas rapidas en pastilla */
.chat-qr-chip {
  border: 1px solid rgba(37, 99, 235, .3);
  border-radius: 999px;
  background: #fff;
  color: var(--kdx-blue, #2563eb);
  font-weight: 600;
}

.chat-qr-chip:hover { border-color: var(--kdx-blue, #2563eb); background: #eef3ff; color: #1d4ed8; }

/* Entrada */
#Smallchat .Input { padding: 12px 14px; background: #fff; border-top: 1px solid var(--kdx-line, #e6ebf3); }

#Smallchat .Input_field {
  border: 1px solid var(--kdx-line, #e6ebf3);
  border-radius: 999px;
  background: #f5f7fb;
  padding-left: 16px;
}

#Smallchat .Input_field:focus { border-color: rgba(37, 99, 235, .5); background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

#Smallchat .Input_button-send,
.Recorder_send { background: var(--kdx-blue, #2563eb); color: #fff; border-radius: 50%; }
#Smallchat .Input_button-send:hover { background: #1d4ed8; }

#Smallchat .Messenger_content > .row:last-child { background: #fff; }

@media (max-width: 768px) {
  .kfab-wa { left: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 1.45rem; }
  .chat_on { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  #tooltip_chat { right: 16px; bottom: 84px; max-width: 200px; font-size: .78rem; }
  #Smallchat .Layout-open,
  #Smallchat .Messenger_messenger { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat_on, .chat_on .animacion, .kfab-wa { animation: none; transition: none; }
  .chat_on::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Calendario compartido al cierre del catálogo y de las páginas de soluciones
   --------------------------------------------------------------------------- */
.kdx-demo-cal { background: var(--kdx-paper); }
.kdx-demo-cal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.kdx-demo-cal__copy { max-width: 76ch; }
.kdx-demo-cal__copy .kdx-h2 { margin: 8px 0 12px; }
.kdx-demo-cal__card { grid-column: 1 / -1; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--kdx-line); border-radius: 20px; background: #fff; box-shadow: var(--kdx-shadow); }
.kdx-demo-cal__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; padding: 15px 20px; border-bottom: 1px solid var(--kdx-line); background: #f8faff; font-family: 'Poppins', system-ui, sans-serif; font-size: .92rem; font-weight: 600; color: var(--kdx-ink); }
.kdx-demo-cal__bar span, .kdx-demo-cal__bar a { display: inline-flex; align-items: center; gap: 9px; }
.kdx-demo-cal__bar i { color: var(--kdx-blue); }
.kdx-demo-cal__bar a { font-family: 'Open Sans', system-ui, sans-serif; font-size: .84rem; font-weight: 600; color: var(--kdx-blue); text-decoration: none; }
.kdx-demo-cal__bar a:hover { text-decoration: underline; }
.kdx-demo-cal__card iframe { display: block; width: 100%; height: 780px; border: 0; background: #fff; }
@media (max-width: 575px) {
  .kdx-demo-cal__bar { align-items: flex-start; flex-direction: column; padding: 14px 16px; }
  .kdx-demo-cal__card iframe { height: 780px; }
}