/* Kontrola web: estilos del sitio.
   Bloque 1: base, fuentes y piezas propias del sitio en produccion.
   Bloque 2: copia del bloque <style> de diseno/Main.dc.html (animaciones y efectos).
   El resto del diseno vive en los atributos style="..." de src/views, tal como en el
   prototipo, para poder comparar y portar sus cambios facilmente. */

/* ---------- Bloque 1 ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/montserrat-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fuentes/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
:root{--kt-marino:#04132A;--kt-superficie:#0B1E3D;--kt-cian:#29C5D4;--kt-turquesa:#0B7A88;--kt-claro:#F3F6FA}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:#F3F6FA;font-family:Montserrat,system-ui,sans-serif;color:#04132A;font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
.kt-saltar{position:absolute;left:16px;top:-80px;z-index:10000;padding:12px 18px;background:#29C5D4;color:#04132A;font-weight:700;border-radius:10px;text-decoration:none}
.kt-saltar:focus{top:16px}
/* Nota del plazo minimo: obligatoria junto a cada "sin costo" o "$0" (brief 1.1). */
.nota-plazo{margin:0;font-size:13px;line-height:1.5;opacity:.85}
.kt-asterisco{color:inherit;text-decoration:none;font-weight:700;padding:0 2px}
.kt-asterisco:hover{text-decoration:underline}
/* "Por donde empiezo": estado de cada opcion. */
.kt-opcion{border:2px solid #A3B0C6;background:#FFFFFF;color:#04132A}
.kt-opcion[aria-pressed="true"]{border-color:#04132A;background:#04132A;color:#FFFFFF}
.kt-opcion:hover{border-color:#04132A}
/* Celular: menu plegable (el boton solo aparece si hay JS) y diagramas en vertical. */
.kt-menu-btn{min-height:44px;padding:0 16px;border:1px solid #8EA3C7;border-radius:10px;background:transparent;color:#E6EDF7;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:720px){
.kt-menu-btn:not([hidden]){display:inline-flex;align-items:center}
.kt-con-js .kt-menu{display:none !important;flex-basis:100%;flex-direction:column;align-items:stretch !important}
.kt-con-js .kt-menu.kt-abierto{display:flex !important}
.kt-erp{flex-direction:column !important;gap:20px !important}
.kt-erp-centro{order:-1}
.kt-erp-lado{flex:none !important;flex-direction:row !important;flex-wrap:wrap;justify-content:center;gap:10px !important}
.kt-erp-linea{display:none}
.kt-linea{grid-template-columns:1fr !important;padding:0 0 0 30px !important;background:linear-gradient(180deg,#263E64,#29C5D4) 7px 0/2px 100% no-repeat !important}
.kt-linea-punto{top:28px !important;left:-30px !important}
}
@media (min-width:721px){.kt-menu-btn{display:none}}
/* Modulos del ERP: icono, frase corta y "Ver que incluye" plegable (<details>, sin JS). */
.kt-modulo-icono{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.kt-modulo:hover .kt-modulo-icono{transform:scale(1.08) rotate(-4deg)}
.kt-detalle summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;cursor:pointer;list-style:none}
.kt-detalle summary::-webkit-details-marker{display:none}
.kt-detalle summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:999px;border:1px solid #0B7A88;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;transition:transform .25s ease}
.kt-detalle[open] summary::after{transform:rotate(45deg)}
.kt-detalle summary:hover{color:#075E69}
/* Pantalla de carga: si ya se vio en esta visita, no se vuelve a mostrar. */
.kt-ya-cargo .kt-loader{display:none !important}
/* Aparicion al hacer scroll en navegadores sin animation-timeline (Safari, Firefox):
   js/sitio.js pone .kt-io en <html> y .kt-visto en cada bloque al entrar en pantalla. */
.kt-io .kt-reveal{transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.kt-io .kt-reveal:not(.kt-visto){opacity:0;translate:0 28px}
.kt-io .kt-bar{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.kt-io .kt-bar:not(.kt-visto){transform:scaleY(0)}
@media print{.kt-loader{display:none !important}.kt-io .kt-reveal,.kt-io .kt-bar{opacity:1 !important;translate:none !important;transform:none !important}}
/* Daniela flotante: burbuja abajo a la derecha y su conversacion encima. */
.kt-daniela{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.kt-daniela>*{pointer-events:auto}
.kt-daniela-panel{width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px)}
.kt-daniela-panel [data-mensajes]{flex:1 1 auto;min-height:96px !important;max-height:none !important;overflow-y:auto}
@media (max-width:480px){.kt-daniela{right:16px;bottom:16px}}
@media print{.kt-daniela{display:none}}

/* ---------- Bloque 2: diseno/Main.dc.html ---------- */
a{color:#0B7A88}a:hover{color:#075E69}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #29C5D4;outline-offset:2px}

@property --kt-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes kt-up{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@keyframes kt-grid{from{background-position:0 0,0 0}to{background-position:0 64px,64px 0}}
@keyframes kt-orb{0%,100%{transform:translate(0,0) scale(1);opacity:.55}50%{transform:translate(60px,-40px) scale(1.2);opacity:.9}}
@keyframes kt-shine{to{background-position:200% center}}
@keyframes kt-step{0%,18%,100%{border-color:#263E64;box-shadow:none}6%,12%{border-color:#29C5D4;box-shadow:0 0 0 1px #29C5D4,0 0 28px rgba(41,197,212,.35)}}
@keyframes kt-glow{0%,100%{box-shadow:0 0 0 0 rgba(41,197,212,.55)}50%{box-shadow:0 0 0 12px rgba(41,197,212,0)}}
@keyframes kt-spin{to{--kt-ang:360deg}}
@keyframes kt-rot{to{transform:rotate(360deg)}}
@keyframes kt-ticker{to{transform:translateX(-50%)}}
@keyframes kt-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes kt-blink{50%{opacity:0}}
@keyframes kt-scan{from{transform:translateY(-100%)}to{transform:translateY(900%)}}
.kt-hero{position:relative;overflow:hidden;isolation:isolate}
.kt-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(41,197,212,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(41,197,212,.07) 1px,transparent 1px);background-size:64px 64px;animation:kt-grid 6s linear infinite;mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%)}
.kt-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:kt-orb 14s ease-in-out infinite}
.kt-scanline{position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(41,197,212,.06),transparent);animation:kt-scan 9s linear infinite}
.kt-up{animation:kt-up .9s cubic-bezier(.2,.7,.2,1) both}
.kt-d1{animation-delay:.1s}.kt-d2{animation-delay:.25s}.kt-d3{animation-delay:.4s}.kt-d4{animation-delay:.55s}.kt-d5{animation-delay:.7s}
.kt-shimmer{background:linear-gradient(90deg,#29C5D4 0%,#9FF3FA 25%,#29C5D4 50%,#9FF3FA 75%,#29C5D4 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:kt-shine 4s linear infinite}
.kt-cursor::after{content:"_";color:#29C5D4;margin-left:4px;animation:kt-blink 1s steps(1) infinite}
.kt-step{animation:kt-step 8s ease-in-out infinite}
.kt-s2{animation-delay:1.5s}.kt-s3{animation-delay:3s}
.kt-cta{position:relative;overflow:hidden;animation:kt-glow 2.6s ease-out infinite;transition:transform .2s ease}
.kt-cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.kt-cta:hover{transform:translateY(-2px)}.kt-cta:hover::after{left:120%}
.kt-btn{transition:transform .2s ease,background-color .2s ease,border-color .2s ease}.kt-btn:hover{transform:translateY(-2px);border-color:#29C5D4 !important}
.kt-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.kt-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(4,19,42,.14),0 0 0 1px #29C5D4;border-color:#29C5D4 !important}
.kt-borde{border:2px solid transparent !important;background:linear-gradient(#04132A,#04132A) padding-box,conic-gradient(from var(--kt-ang),#29C5D4,rgba(41,197,212,.08) 30%,rgba(41,197,212,.08) 70%,#29C5D4) border-box !important;animation:kt-spin 6s linear infinite}
@supports (animation-timeline: view()){.kt-borde.kt-reveal{animation:kt-spin 6s linear infinite,kt-up linear both;animation-timeline:auto,view();animation-range:normal,entry 0% entry 45%}}
.kt-gear{display:inline-block;animation:kt-rot 5s linear infinite}.kt-gear-r{animation-direction:reverse}
.kt-ticker{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kt-ticker-track{display:flex;width:max-content;gap:40px;animation:kt-ticker 40s linear infinite}
.kt-ticker:hover .kt-ticker-track{animation-play-state:paused}
.kt-bar{transform-origin:bottom}
.kt-pulse{animation:kt-glow 2.2s ease-out infinite}
@supports (animation-timeline: view()){
.kt-reveal{animation:kt-up linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
.kt-bar{animation:kt-bar linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}

@property --kt-pct{syntax:'<integer>';initial-value:0;inherits:false}
@keyframes kt-load-out{to{opacity:0;visibility:hidden}}
@keyframes kt-logo-in{0%{opacity:0;transform:scale(.4) rotate(-12deg);filter:blur(12px)}60%{opacity:1;transform:scale(1.08) rotate(0);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes kt-logo-glow{0%,100%{filter:drop-shadow(0 0 6px rgba(41,197,212,.35))}50%{filter:drop-shadow(0 0 26px rgba(41,197,212,.9))}}
@keyframes kt-logo-shine{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes kt-ring{to{transform:rotate(360deg)}}
@keyframes kt-fill{from{width:0}to{width:100%}}
@keyframes kt-count{from{--kt-pct:0}to{--kt-pct:100}}
@keyframes kt-letters{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.02em}}
@keyframes kt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.kt-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:radial-gradient(circle at 50% 45%,#0B1E3D 0%,#04132A 60%);animation:kt-load-out .7s ease 2.9s forwards}
.kt-loader-mark{position:relative;width:250px;height:250px;display:flex;align-items:center;justify-content:center}
.kt-loader-mark .kt-marca{width:180px;height:176px;animation:kt-logo-in 1.1s cubic-bezier(.2,.8,.2,1) both,kt-logo-glow 1.6s ease-in-out 1.1s infinite}
.kt-loader-shine{position:absolute;left:35px;top:37px;width:180px;height:176px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%);background-size:200% 100%;-webkit-mask:url(/img/kontrola-marca.webp) center/contain no-repeat;mask:url(/img/kontrola-marca.webp) center/contain no-repeat;animation:kt-logo-shine 1.4s ease-in-out 1s infinite}
.kt-loader-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(41,197,212,.15);border-top-color:#29C5D4;border-right-color:#29C5D4;animation:kt-ring 1.1s linear infinite}
.kt-loader-ring2{position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(41,197,212,.35);animation:kt-ring 4s linear infinite reverse}
.kt-loader-name{margin:0;font-weight:700;font-size:26px;color:#29C5D4;animation:kt-letters 1s ease .5s both}
.kt-loader-name span{font-weight:500;color:#8EA3C7}
.kt-loader-bar{width:220px;height:4px;border-radius:99px;background:#1E3355;overflow:hidden}
.kt-loader-bar i{display:block;height:100%;background:linear-gradient(90deg,#0B7A88,#29C5D4,#9FF3FA);box-shadow:0 0 12px #29C5D4;animation:kt-fill 2.6s cubic-bezier(.4,.1,.2,1) .2s both}
.kt-loader-pct{margin:0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:#8EA3C7;counter-reset:pct var(--kt-pct);animation:kt-count 2.6s cubic-bezier(.4,.1,.2,1) .2s both}
.kt-loader-pct::after{content:" " counter(pct) "%"}
.kt-logo-hdr{width:80px;height:78px;animation:kt-logo-glow 3s ease-in-out infinite;transition:transform .4s ease}
a:hover .kt-logo-hdr{transform:rotate(-8deg) scale(1.08)}
/* Logotipo con engranes que giran (2026-11-03, Oscar: «más grande y más movimiento en los engranes»).
   La marca va sin engranes (kontrola-marca-base.webp) y cada engrane encima, en su lugar exacto. */
@keyframes kt-eng-giro{to{transform:rotate(360deg)}}
@keyframes kt-eng-giro-r{to{transform:rotate(-360deg)}}
@keyframes kt-eng-tic{0%{transform:rotate(0)}20%,25%{transform:rotate(90deg)}45%,50%{transform:rotate(180deg)}70%,75%{transform:rotate(270deg)}95%,100%{transform:rotate(360deg)}}
.kt-marca{position:relative;display:inline-block;flex:none}
.kt-marca img{position:absolute;display:block;margin:0}
.kt-marca > img:first-child{inset:0;width:100%;height:100%}
.kt-eng{will-change:transform}
.kt-eng-1{left:18.11%;top:17.17%;width:15.14%;height:15.51%;animation:kt-eng-giro 5s linear infinite}
.kt-eng-2{left:87.57%;top:27.7%;width:11.89%;height:12.19%;animation:kt-eng-giro-r 3.2s linear infinite}
.kt-eng-3{left:.54%;top:60.11%;width:11.35%;height:11.63%;animation:kt-eng-tic 2.4s cubic-bezier(.5,0,.3,1.4) infinite}
/* Celular (2026-11-03, Oscar: «las letras se ven algo grandes, no se ve bien distribuido»).
   Encabezado: 1.ª fila logotipo + nombre en una línea + engrane; 2.ª fila Menú y «Agenda» juntos;
   el menú abierto cae debajo. Títulos, textos y márgenes más compactos. Las plantillas usan
   style="..." del prototipo, por eso aquí va !important. */
@media (max-width:720px){
body{font-size:16px}
.kt-encabezado-fila{padding:12px 16px !important;gap:12px 10px !important;justify-content:flex-start !important}
.kt-encabezado-fila > a[href="/"]{flex:1 1 100%;gap:10px !important;padding-right:52px;min-width:0}
.kt-logo-hdr{width:46px;height:45px}
.kt-logo-texto{font-size:clamp(15px,4.6vw,18px) !important;white-space:nowrap}
.kt-encabezado .kt-engrane{top:13px !important;right:16px !important;width:42px !important;height:42px !important}
.kt-encabezado .kt-menu-btn{order:1;padding:0 13px}
.kt-encabezado-fila > div:last-child{order:2;flex:1 1 0;min-width:0}
.kt-encabezado-fila > div:last-child .kt-btn{width:100%;justify-content:center;white-space:nowrap;font-size:clamp(13px,3.9vw,14px) !important;padding:0 10px !important}
.kt-hero .kt-cta,.kt-hero .kt-cta + .kt-btn{flex:1 1 100%;justify-content:center;text-align:center;padding:0 16px !important}
.kt-encabezado .kt-menu{order:3}
.kt-hero h1{font-size:clamp(27px,7.6vw,32px) !important;line-height:1.15 !important}
.kt-hero p[style*="font-size: 19px"],.kt-hero p[style*="font-size: 18px"]{font-size:16px !important}
main h2{font-size:clamp(24px,6.6vw,28px) !important;line-height:1.2 !important}
main h3[style*="font-size: 24px"]{font-size:20px !important}
main p[style*="font-size: 19px"],main p[style*="font-size: 18px"],main p[style*="font-size: 20px"]{font-size:16px !important}
[style*="padding: 96px 24px"],[style*="padding: 88px 24px"],[style*="padding: 72px 24px"],[style*="padding: 64px 24px"]{padding-top:48px !important;padding-bottom:56px !important;padding-left:18px !important;padding-right:18px !important}
.kt-card[style*="padding: 32px"],main [style*="border-radius: 20px"][style*="padding: 32px"]{padding:22px !important}
.kt-daniela-burbuja{width:52px !important;height:52px !important}
}
/* El engrane de ingreso también gira despacio. */
.kt-engrane svg{animation:kt-eng-giro 12s linear infinite}
@media (prefers-reduced-motion: reduce){.kt-loader{display:none !important}}
@media (max-width: 720px){.kt-flecha{width: 100%; text-align: center; transform: rotate(90deg)}}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
.kt-shimmer{color:#29C5D4 !important;background:none}
}

/* Preguntas frecuentes */
.kt-preguntas summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:44px}
.kt-preguntas summary::-webkit-details-marker{display:none}
.kt-preguntas summary::after{content:"+";flex:none;font-family:'IBM Plex Mono',monospace;font-size:22px;color:#0B7A88}
.kt-preguntas details[open] summary::after{content:"−"}
.kt-preguntas summary:focus-visible{outline:3px solid #29C5D4;outline-offset:2px;border-radius:14px}

/* Varias páginas: enlace de la página actual y barra de carga al cambiar de página */
.kt-menu a[aria-current]{color:#29C5D4 !important;box-shadow:inset 0 -2px 0 #29C5D4}
.kt-barra-carga{position:fixed;top:0;left:0;z-index:1000;height:3px;width:0;background:#29C5D4;opacity:0;pointer-events:none}
.kt-barra-carga.kt-activa{opacity:1;width:78%;transition:width 6s cubic-bezier(.1,.6,.2,1),opacity .2s ease}
@media (prefers-reduced-motion: reduce){.kt-barra-carga.kt-activa{transition:none;width:100%}}
.kt-tarjeta-pagina:focus-visible{outline:3px solid #29C5D4;outline-offset:2px}
.kt-engrane:hover,.kt-engrane:focus-visible{border-color:#29C5D4 !important;color:#29C5D4 !important}
.kt-engrane:focus-visible{outline:3px solid #29C5D4;outline-offset:2px}
/* Menú agrupado (2026-11-02): Servicios se despliega con <details>; Productos es enlace directo. */
.kt-encabezado{position:relative;z-index:20}
.kt-submenu > summary{list-style:none}
.kt-submenu > summary::-webkit-details-marker{display:none}
.kt-submenu > summary:hover,.kt-submenu > summary:focus-visible,.kt-submenu[open] > summary{color:#29C5D4 !important}
.kt-submenu > summary:focus-visible{outline:3px solid #29C5D4;outline-offset:2px;border-radius:6px}
.kt-submenu:has(a[aria-current="page"]) > summary{color:#29C5D4 !important;box-shadow:inset 0 -2px 0 #29C5D4}
.kt-submenu-flecha{transition:transform .2s ease}
.kt-submenu[open] .kt-submenu-flecha{transform:rotate(180deg)}
.kt-submenu-panel a:hover,.kt-submenu-panel a:focus-visible{background:#163056;color:#29C5D4 !important}
.kt-menu .kt-submenu-panel a[aria-current="page"]{box-shadow:inset 3px 0 0 #29C5D4;background:#163056}
@media (min-width:721px){
.kt-submenu-panel{position:absolute;top:100%;left:-14px;z-index:30;box-shadow:0 18px 40px rgba(4,19,42,.55)}
}
@media (max-width:720px){
.kt-submenu-panel{border:0 !important;background:transparent !important;padding:0 0 6px 12px !important;min-width:0 !important}
}
@media (prefers-reduced-motion: reduce){.kt-submenu-flecha{transition:none}}
.kt-encabezado .kt-btn[aria-current]{box-shadow:0 0 0 2px #04132A,0 0 0 4px #29C5D4}