/* Base común de las páginas de servicio
   Generado por _trabajo/construir-css.js — no editar a mano.
   Todo el CSS cuelga de .ksrv para no tocar el header/footer de Elementor. */
html, body { margin: 0 !important; padding: 0 !important; background-color: #0B0C0E; }
.ksrv, .ksrv *, .ksrv *::before, .ksrv *::after{box-sizing:border-box; margin:0; padding:0;}
.ksrv{font-family:'KsrvSans',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--black); background:var(--bg); line-height:1.5; overflow-x:hidden;}
.ksrv a{text-decoration:none; color:inherit;}
.ksrv .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.ksrv .dots{position:absolute; pointer-events:none;
    background-image: radial-gradient(circle, currentColor 1.6px, transparent 1.7px);
    background-size: 15px 15px;}
.ksrv .cta-btn{background:var(--orange); color:#fff; font-weight:700; font-size:14px; padding:12px 22px; border-radius:10px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:none; cursor:pointer; font-family:inherit;}
.ksrv .cta-btn:hover{background:var(--orange-dark);}
.ksrv .cta-btn.secondary{background:#fff; color:var(--black); border:1px solid var(--border);}
.ksrv .hero .dots{top:-40px; right:-60px; width:340px; height:340px; color:rgba(255,91,0,.35);
    -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%); mask-image:radial-gradient(circle,#000 0%,transparent 70%);}
.ksrv .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--orange); text-transform:uppercase; margin-bottom:20px;}
.ksrv .eyebrow::before{content:''; width:18px; height:1.5px; background:var(--orange);}
.ksrv .section.band{background:var(--bg2);}
.ksrv .section-title{font-size:34px; font-weight:800; letter-spacing:-.01em; margin-bottom:14px;}
.ksrv .section-title .accent{color:var(--orange);}
.ksrv .section-sub{color:var(--gray); font-size:16px; max-width:640px; margin-bottom:10px;}
.ksrv .faq-term-bar{display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.08);}
.ksrv .faq-term-bar .tdot{width:10px; height:10px; border-radius:50%;}
.ksrv .faq-term-bar .tdot:nth-child(1){background:var(--orange);}
.ksrv .faq-term-bar .tdot:nth-child(2){background:var(--plomo-light);}
.ksrv .faq-term-bar .tdot:nth-child(3){background:var(--plomo);}
.ksrv .faq-term-bar .term-title{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:#8C8E96;}
.ksrv .faq-terminal{position:relative; z-index:5;}
.ksrv .faq-line{border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; position:relative; z-index:5;}
.ksrv .faq-q{cursor:pointer; user-select:none; position:relative; z-index:5;}
.ksrv .faq-line:last-child{border-bottom:none;}
.ksrv .photo-bg-slot,
.ksrv .photo-bg-slot img,
.ksrv .faq-photo-img {
  pointer-events: none !important;
}
.ksrv .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.ksrv .faq-line.open .faq-a{max-height:280px;}
.ksrv .faq-line.open .faq-q .chev svg{transform:rotate(180deg); color:var(--orange);}
.ksrv .faq-line.open .faq-q .prompt{color:var(--orange);}
.ksrv .faq-a-inner{padding:0 24px 20px 24px; display:flex; gap:12px; font-family:var(--mono); font-size:13.5px;}
.ksrv .faq-a-inner .out{color:var(--plomo-light); flex-shrink:0;}
.ksrv .faq-a-inner p{color:#C7C9CF; font-family:'KsrvSans',sans-serif; font-size:14.5px; margin:0;}
.ksrv .cta-final .dots{top:-50px; right:-60px; width:280px; height:280px; color:rgba(255,91,0,.28); -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%); mask-image:radial-gradient(circle,#000 0%,transparent 70%);}
.ksrv .cta-final .wrap{position:relative; z-index:2;}
.ksrv .cta-alert{display:inline-flex; align-items:center; gap:9px; background:rgba(255,91,0,.1); border:1px solid rgba(255,91,0,.38); border-radius:30px; padding:8px 18px 8px 14px; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--orange); text-transform:uppercase; margin-bottom:26px;}
.ksrv .cta-alert .adot{width:7px; height:7px; border-radius:50%; background:var(--orange); animation:ks-pulse 1.6s infinite;}
.ksrv .cta-final h2 .accent{color:var(--orange);}
.ksrv .cta-final .btns{display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:52px;}
.ksrv .cta-final .btns .cta-btn{position:relative; overflow:hidden; padding:16px 28px; font-size:15px;}
.ksrv .cta-final .btns .cta-btn::before{content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); animation:ks-shine 2.8s ease-in-out infinite;}
.ksrv .cta-trust .t:hover{transform:translateY(-4px);}
.ksrv .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.ksrv .footer-logo .tech{color:var(--orange);}
.ksrv .social{display:flex; gap:10px;}
.ksrv .social span{width:32px;height:32px;border-radius:50%;background:var(--orange); display:flex; align-items:center;justify-content:center; font-size:13px;}
@media(max-width:600px){
.ksrv .wrap{padding:0 20px;}
}

@keyframes ks-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,91,0,.55);} 70%{box-shadow:0 0 0 8px rgba(255,91,0,0);} 100%{box-shadow:0 0 0 0 rgba(255,91,0,0);} }
@keyframes ks-spin{ to{ transform:rotate(360deg); } }
@keyframes ks-ringpulse{ 0%{ transform:scale(.85); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
@keyframes ks-flow{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes ks-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@keyframes ks-nucleus-pulse{ 0%,100%{ box-shadow:0 0 0 10px rgba(255,91,0,.08), 0 0 0 20px rgba(255,91,0,.05); } 50%{ box-shadow:0 0 0 14px rgba(255,91,0,.13), 0 0 0 26px rgba(255,91,0,.06); } }
@keyframes ks-blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes ks-shine{ 0%{left:-60%;} 55%{left:130%;} 100%{left:130%;} }

/* ---- correcciones propias (ver construir-css.js) ---- */
.ksrv{position:relative;}

/*
 * En móvil el texto se salía de la pantalla: el titular, el párrafo y el
 * bloque comparativo medían más que el viewport.
 *
 * El diseño responsive de los mockups sí es correcto (a 900px las rejillas
 * pasan a una columna y las métricas se vuelven un carrusel deslizable). Lo
 * que falla es que un item de grid o flex tiene `min-width:auto`, es decir,
 * su mínimo es el min-content: basta que dentro haya un carrusel para que la
 * columna no pueda encoger y arrastre consigo al titular y al párrafo.
 *
 * min-width:0 rompe ese suelo; max-width:100% impide además que un bloque
 * interior con overflow propio crezca más que su columna.
 *
 * Comprobado que los carruseles siguen desplazándose: el desbordamiento
 * interno que necesitan es suyo, no del documento.
 */
.ksrv .wrap > *,
.ksrv [class*="-grid"] > *{min-width:0;}
.ksrv [class*="-grid"] > * > *{max-width:100%;}

/*
 * .case-top (tarjetas de "Casos de éxito / Resultados comprobados") pone el
 * ícono+texto y el sello "Verificado" en la misma fila (space-between); en
 * móvil, con poco ancho, quedan apretados y a veces sobrepuestos. Se pasa a
 * columna con "Verificado" arriba (column-reverse: es el último hijo en el
 * HTML en todas las páginas que usan este patrón). Va en las correcciones
 * globales porque el patrón se repite igual en varias páginas de servicio
 * (arquitectura-empresarial, ciberseguridad-360, kloud, software-factory).
 * Pedido el 21-ago-2026.
 */
@media(max-width:900px){
  .ksrv .case-top{ flex-direction:column-reverse; align-items:flex-start; justify-content:flex-start; gap:10px; }
}

/*
 * Hero en móvil (<=900px): reducción del gap de 50px de escritorio y centrado de la foto
 */
@media(max-width:900px){
  .ksrv .hero .wrap{
    gap: 24px !important;
    row-gap: 24px !important;
  }
  .ksrv .hero-photo,
  .ksrv .hero-photo-wrap{
    margin-top: 0 !important;
    margin-inline: auto !important;
  }
  .ksrv .commercial-photo,
  .ksrv .agro-photo,
  .ksrv .photo-slot{
    margin-top: 0 !important;
  }
}

/*
 * Sliders horizontales en móvil (<=900px): eliminar márgenes negativos que desbordan
 * la pantalla y desalinean las tarjetas del texto.
 */
@media(max-width:900px){
  .ksrv .steps-grid,
  .ksrv .agro-icons,
  .ksrv .flip-grid,
  .ksrv .case-grid,
  .ksrv .vendor-list,
  .ksrv .outcome-grid{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/*
 * Fotos decorativas flotantes: pointer-events:none para que nunca bloqueen
 * clics o interactividad en botones y cards cercanos en desktop.
 */
.ksrv .problem-photo-slot img,
.ksrv .services-photo-slot img,
.ksrv .photo-bg-slot img,
.ksrv .commercial-photo img,
.ksrv .agro-photo img{
  pointer-events: none !important;
}

/*
 * Quiz de diagnóstico: Radio buttons visuales, validación interactiva y acciones finales
 */
.ksrv .quiz-opt{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  user-select: none;
  -webkit-user-select: none;
}
.ksrv .quiz-opt-radio{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #525660;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  background: transparent;
  box-sizing: border-box;
}
.ksrv .quiz-opt:hover .quiz-opt-radio{
  border-color: var(--orange);
}
.ksrv .quiz-opt.selected .quiz-opt-radio{
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: inset 0 0 0 3.5px #191B1F;
}
.ksrv .quiz-opt-label{
  flex: 1;
  line-height: 1.4;
}
.ksrv .quiz-options.quiz-shake{
  animation: ks-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.ksrv .quiz-options.quiz-shake .quiz-opt{
  border-color: rgba(255, 91, 0, 0.75) !important;
}
@keyframes ks-shake{
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}
.ksrv .quiz-hint{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 91, 0, 0.12);
  border: 1px solid rgba(255, 91, 0, 0.4);
  color: #FFA066;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: -14px;
  margin-bottom: 22px;
  animation: ks-fadein 0.25s ease;
}
@keyframes ks-fadein{
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ksrv .quiz-nav button.quiz-next-pending{
  opacity: .75;
  filter: saturate(0.9);
  cursor: pointer;
}
.ksrv .quiz-result-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
@media(max-width:900px){
  .ksrv .mini-stats{
    margin: 0 !important;
    padding: 8px 20px 14px 0 !important;
  }
}
@media(max-width:600px){
  .ksrv .quiz-result-actions{
    flex-direction: column;
    width: 100%;
  }
  .ksrv .quiz-result-actions .cta-btn{
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
    padding: 13px 16px !important;
    box-sizing: border-box !important;
  }
  .ksrv .hero-ctas .cta-btn,
  .ksrv .cta-final .btns .cta-btn,
  .ksrv .grid-cta .cta-btn{
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
    justify-content: center !important;
  }
}
.ksrv .quiz-card{
  position: relative !important;
  z-index: 30 !important;
}
.ksrv #diagnostico{
  position: relative !important;
  z-index: 20 !important;
}
.ksrv .problem-photo-slot img,
.ksrv .services-photo-slot img,
.ksrv .photo-bg-slot img,
.ksrv .factory-photo img{
  pointer-events: none !important;
}
/* Garantía de visibilidad inmediata para infografías y bloques comparativos */
.ksrv .blindspot-wrap,
.ksrv .divide-block {
  opacity: 1 !important;
  transform: none !important;
}

/* Anillos de progreso animados universales (.ksrv) */
.ksrv .ring-progress,
.ksrv .ring-progress-lg {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ksrv .ring-progress {
  width: 34px;
  height: 34px;
}
.ksrv .ring-progress-lg {
  width: 90px;
  height: 90px;
}
.ksrv .ring-progress svg,
.ksrv .ring-progress-lg svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
.ksrv .ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 4;
}
.ksrv .ring-track-lg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 8;
}
.ksrv .ring-fill {
  fill: none;
  stroke: var(--orange, #FF5B00);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: var(--circ, 87.96);
  stroke-dashoffset: var(--circ, 87.96);
  transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1);
  will-change: stroke-dashoffset;
}
.ksrv .ring-fill-lg {
  fill: none;
  stroke: var(--orange, #FF5B00);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: var(--circ, 263.9);
  stroke-dashoffset: var(--circ, 263.9);
  transition: stroke-dashoffset 2s cubic-bezier(.4, 0, .2, 1);
  will-change: stroke-dashoffset;
}
.ksrv .ring-progress.in-view .ring-fill,
.ksrv .ring-progress-lg.in-view .ring-fill-lg {
  stroke-dashoffset: var(--offset, 0);
}