/* Versión 2 de la página de Nomikhor: estructura de página de producto (estilo Gusto) con la marca Nomikhor + Khor.
   Azul marino de Nomikhor como base, naranja como acción, rojo Khor como acento puntual. */
:root{
  --navy:#051758; --navy-2:#0b1f73; --azul:#0041F9; --naranja:#E0782F; --naranja-claro:#F5A261; --rojo:#F23D27;
  --tinta:#121a3a; --texto:#3a4160; --suave:#646c8a; --linea:#e3e6ef; --fondo:#ffffff; --fondo-2:#f6f7fb; --crema:#fff7f0;
  --ok:#0F6E56;
  --display:'Raleway','Segoe UI',Arial,sans-serif; --cuerpo:'Source Sans 3','Segoe UI',Arial,sans-serif;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font:17px/1.6 var(--cuerpo);-webkit-font-smoothing:antialiased}
html.lang-es .en,html.lang-en .es{display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);color:var(--navy);margin:0;line-height:1.08;text-wrap:balance;letter-spacing:-.02em}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font:700 16px var(--cuerpo);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:.15s}
.btn-prim{background:var(--navy);color:#fff}.btn-prim:hover{background:var(--navy-2)}
.btn-nar{background:var(--naranja);color:#fff}.btn-nar:hover{background:#c9661f}
.btn-out{border-color:var(--navy);color:var(--navy);background:#fff}.btn-out:hover{background:var(--fondo-2)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.link-flecha{font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--navy);padding-bottom:2px}
.link-flecha::after{content:" →"}
.chip{display:inline-block;border:1.5px solid var(--naranja);color:var(--naranja);border-radius:99px;padding:5px 14px;font:700 14px var(--cuerpo);background:#fff}
.eyebrow{font:700 14px var(--cuerpo);color:var(--naranja);letter-spacing:.02em;margin-bottom:14px;display:block}

/* Barra de aviso y encabezado */
.aviso{background:linear-gradient(90deg,var(--navy),#28207a 60%,#7a2a3c);color:#fff;text-align:center;font-size:14.5px;padding:9px 16px}
.aviso a{color:#fff;font-weight:700}
.top{background:#fff;border-bottom:1px solid var(--linea)}
.top > .wrap{display:flex;align-items:center;gap:22px;height:70px}
.logo img{height:26px}
.menu{display:flex;gap:4px}
.menu a{padding:8px 12px;border-radius:8px;font-weight:600;color:var(--tinta);text-decoration:none;font-size:15.5px}
.menu a:hover{background:var(--fondo-2)}
.der{margin-left:auto;display:flex;align-items:center;gap:12px}
.der a.entrar{font-weight:600;text-decoration:none;color:var(--tinta)}
.lang{display:flex;border:1px solid var(--linea);border-radius:9px;overflow:hidden}
.lang button{border:0;background:#fff;padding:6px 9px;font:700 12.5px var(--cuerpo);color:var(--suave);cursor:pointer}
.lang button.on{background:var(--navy);color:#fff}
.sub{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.sub .wrap{display:flex;align-items:center;gap:22px;height:54px;overflow-x:auto}
.sub b{color:var(--navy);font-family:var(--display);font-weight:800;white-space:nowrap}
.sub a{text-decoration:none;color:var(--tinta);font-weight:600;font-size:15px;white-space:nowrap}
.sub a:hover{color:var(--naranja)}
.sub .demo{margin-left:auto;display:flex;align-items:center;gap:6px}

/* Hero */
.hero{padding:72px 0 36px;text-align:center;background:radial-gradient(1200px 400px at 50% -10%,var(--crema),#fff 70%)}
.hero h1{font-size:clamp(44px,7.2vw,92px);font-weight:900}
.hero h1 em{font-style:normal;color:var(--naranja)}
.hero p{max-width:640px;margin:22px auto 30px;font-size:19px;color:var(--texto)}
.hero .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Panel con la pantalla del sistema */
.panel{margin:40px auto 0;max-width:1120px;border-radius:28px;padding:56px 56px 0;position:relative;overflow:hidden;
  background:radial-gradient(600px 380px at 85% 10%,rgba(245,162,97,.9),transparent 60%),radial-gradient(520px 360px at 8% 90%,rgba(242,61,39,.55),transparent 60%),linear-gradient(135deg,#0b1f73,#051758 55%,#2b1d6b)}
.panel .bolas{position:absolute;right:-90px;top:-60px;width:420px;opacity:.75;pointer-events:none}
.app{position:relative;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.25);display:grid;grid-template-columns:190px 1fr;min-height:430px;text-align:left}
.app aside{border-right:1px solid var(--linea);padding:18px 12px;font-size:14px}
.app aside img{height:16px;margin:0 6px 18px}
.app aside div{padding:7px 10px;border-radius:8px;color:var(--suave)}
.app aside div.on{background:var(--navy);color:#fff;font-weight:700}
.app main{padding:26px 30px}
.app h2{font-size:34px;font-weight:800}
.app .fechas{color:var(--suave);font-size:14.5px;margin:4px 0 18px}
.prog{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--suave)}
.barra{height:5px;background:var(--fondo-2);border-radius:9px;margin:8px 0 22px;overflow:hidden}
.barra i{display:block;height:100%;width:34%;background:linear-gradient(90deg,var(--naranja),var(--rojo))}
.tareas{border:1px solid var(--linea);border-radius:12px}
.tareas h3{font-size:16px;padding:14px 16px;border-bottom:1px solid var(--linea)}
.tarea{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linea);font-size:15px}
.tarea:last-child{border-bottom:0}
.tarea b{display:block;color:var(--tinta)}
.tarea small{color:var(--suave)}
.tarea span.btnmini{border:1.5px solid var(--linea);border-radius:8px;padding:5px 12px;font-weight:700;font-size:13.5px;color:var(--navy);white-space:nowrap}
.app .cont{display:flex;justify-content:flex-end;margin-top:18px}
.app .cont span{background:var(--navy);color:#fff;border-radius:9px;padding:9px 16px;font-weight:700;font-size:14px}

section{padding:96px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.titulo{font-size:clamp(34px,4.6vw,56px);font-weight:900}
.check{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:12px}
.check li{padding-left:34px;position:relative;font-size:17.5px}
.check li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:#e6f6f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}

/* Ilustración del celular */
.cel-zona{position:relative;border-radius:var(--r);min-height:460px;background:linear-gradient(160deg,var(--crema),#ffe3cc);overflow:hidden;display:grid;place-items:center}
.cel-zona::before{content:"";position:absolute;width:420px;height:420px;border-radius:40%;background:linear-gradient(135deg,var(--naranja-claro),var(--rojo));transform:rotate(18deg);right:-120px;bottom:-140px;opacity:.85}
.cel{position:relative;width:250px;background:#11173a;border-radius:34px;padding:12px;box-shadow:0 30px 60px rgba(5,23,88,.3)}
.cel .pant{background:#fff;border-radius:24px;padding:18px 16px 20px;min-height:430px}
.cel .pant small{color:var(--suave);font-size:12px}
.cel .pant h4{margin:4px 0 14px;font:800 18px var(--display);color:var(--navy)}
.recibo{border:1px solid var(--linea);border-radius:14px;padding:14px;font-size:13px}
.recibo .neto{font:800 28px var(--display);color:var(--navy);margin:2px 0 8px}
.recibo .fila{display:flex;justify-content:space-between;padding:4px 0;border-top:1px dashed var(--linea)}
.firmar{margin-top:14px;background:var(--naranja);color:#fff;text-align:center;border-radius:10px;padding:10px;font-weight:700;font-size:14px}
.chk-ok{margin-top:10px;display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ok);font-weight:700}

/* Fila de íconos */
.iconos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;text-align:center}
.iconos .ic{width:78px;height:78px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;background:var(--crema)}
.iconos .ic svg{width:40px;height:40px}
.iconos b{display:block;font:800 19px/1.25 var(--display);color:var(--navy)}

/* Bento */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.caja{border:1px solid var(--linea);border-radius:var(--r);padding:36px;display:flex;flex-direction:column;gap:14px;min-height:420px;position:relative;overflow:hidden;background:#fff}
.caja h3{font-size:28px;font-weight:800;margin-top:auto}
.caja p{margin:0}
.caja .btns{display:flex;gap:10px;flex-wrap:wrap}
.caja .arte{position:absolute;inset:0 0 auto 0;height:220px;display:grid;place-items:center}
.calc{background:var(--fondo-2);border-radius:16px;padding:16px 18px;width:min(360px,80%);font-size:14px;box-shadow:0 10px 30px rgba(5,23,88,.08)}
.calc .fila{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--linea)}
.calc .fila:last-child{border:0;font-weight:800;color:var(--navy)}
.nodos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:85%}
.nodos span{border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;color:#fff}

/* Cumplimiento */
.cumple{background:var(--fondo-2)}
.docs{background:#fff;border-radius:var(--r);padding:26px;box-shadow:0 20px 50px rgba(5,23,88,.08)}
.docs h4{margin:0 0 12px;font:800 15px var(--display);color:var(--suave);letter-spacing:.04em;text-transform:uppercase}
.doc{display:flex;gap:14px;align-items:center;padding:14px 4px;border-top:1px solid var(--linea)}
.doc .d{width:42px;height:52px;border-radius:8px;background:var(--crema);border:1.5px solid #f3cfae;display:grid;place-items:center;font:800 11px var(--cuerpo);color:var(--naranja);flex:none}
.doc b{display:block;color:var(--tinta)}
.doc small{color:var(--suave)}
.doc .ok{margin-left:auto;color:var(--ok);font-weight:700;font-size:13.5px;white-space:nowrap}

/* Carrusel de opciones */
.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:18px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory}
.op{scroll-snap-align:start;border:1px solid var(--linea);border-radius:var(--r);padding:26px;text-decoration:none;color:var(--texto);display:flex;flex-direction:column;gap:10px;background:#fff;transition:.15s;min-height:250px}
.op:hover{border-color:var(--navy);transform:translateY(-3px)}
.op .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff}
.op .ic svg{width:28px;height:28px}
.op b{font:800 21px var(--display);color:var(--navy)}
.op small{margin-top:auto;font-weight:700;color:var(--navy)}
.op small::after{content:" →"}

/* Secciones por función */
.funcion .split{gap:72px}
.funcion:nth-of-type(even) .orden2{order:2}
.vis{border-radius:var(--r);min-height:380px;padding:30px;display:grid;place-items:center}
.vis.tam{background:linear-gradient(150deg,#fff1e4,#ffd2b3)}
.vis.soporte{background:linear-gradient(150deg,#eef2ff,#d9e1ff)}
.vis.estructura{background:linear-gradient(150deg,#e8f6f1,#cdeee2)}
.mini{background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(5,23,88,.12);padding:18px;width:min(420px,100%);font-size:14px}
.mini .r{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--linea)}
.mini .r:last-child{border:0}
.tag{border-radius:99px;padding:2px 10px;font-weight:700;font-size:12.5px}
.tag.v{background:#e6f6f0;color:var(--ok)}.tag.a{background:#fff2d6;color:#8a5a00}.tag.r{background:#fde8e6;color:#b3261e}
.org{display:grid;gap:12px;justify-items:center}
.org .n{background:#fff;border:1.5px solid var(--navy);border-radius:10px;padding:8px 14px;font-weight:700;color:var(--navy);font-size:14px}
.org .fila{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.org .n.vac{border-style:dashed;color:var(--suave);border-color:var(--suave)}

/* Empieza */
.empieza{background:var(--navy);color:#cfd6f6}
.empieza h2{color:#fff}
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:40px 0 34px;counter-reset:p;list-style:none;padding:0}
.pasos li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:26px;counter-increment:p}
.pasos li::before{content:counter(p);display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--naranja);color:#fff;font:800 18px var(--display);margin-bottom:14px}
.pasos b{display:block;color:#fff;font:800 20px var(--display);margin-bottom:6px}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.tres a{display:block;background:#fff;color:var(--texto);border-radius:var(--r);padding:26px;text-decoration:none}
.tres a b{display:block;font:800 21px var(--display);color:var(--navy);margin-bottom:6px}
.tres a small{display:block;margin-top:12px;font-weight:700;color:var(--naranja)}
.tres a small::after{content:" →"}

/* Preguntas */
.faq{max-width:860px;margin:36px auto 0}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:20px 4px;font:700 19px var(--display);color:var(--navy);display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--naranja);font-size:26px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 4px 20px;color:var(--texto)}
.faq h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin:30px 0 4px}

/* Cierre */
.cierre{text-align:center;background:radial-gradient(900px 340px at 50% 120%,rgba(245,162,97,.45),transparent 60%),var(--crema)}
.cierre .k{font:800 15px var(--cuerpo);letter-spacing:.14em;color:var(--naranja)}
.cierre h2{font-size:clamp(40px,6vw,76px);font-weight:900;margin:10px 0 18px}
.cierre p{max-width:640px;margin:0 auto 28px}
footer{background:#030f3d;color:#aab5e6;padding:44px 0 30px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center}
footer .marcas{display:flex;align-items:center;gap:16px}
footer .marcas img{height:24px;filter:brightness(0) invert(1)}
footer .marcas .khor{height:22px}
footer a{color:#fff}
.mas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.mas a{border:1.5px solid var(--linea);border-radius:99px;padding:8px 16px;text-decoration:none;color:var(--navy);font-weight:600;background:#fff}

@media (max-width:980px){
  .menu{display:none}
  .split,.bento,.pasos,.tres{grid-template-columns:minmax(0,1fr)}
  .funcion:nth-of-type(even) .orden2{order:0}
  .iconos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{padding:28px 16px 0;border-radius:20px}
  .app{grid-template-columns:minmax(0,1fr)}
  .app aside{display:none}
  section{padding:68px 0}
}
@media (max-width:560px){.der a.entrar{display:none}.app main{padding:18px}.app h2{font-size:26px}.tarea{flex-wrap:wrap}.caja{padding:24px;min-height:380px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.op:hover{transform:none}}

/* Menús desplegables (estilo Gusto) */
header.top{position:relative;z-index:40}
.menu{align-items:center}
.menu .mbtn{display:flex;align-items:center;gap:6px;border:0;background:none;padding:8px 12px;border-radius:9px;font:600 15.5px var(--cuerpo);color:var(--tinta);cursor:pointer}
.menu .mbtn:hover,.menu .mbtn.on{background:#eef2ff;color:var(--navy)}
.menu .mbtn.on svg{transform:rotate(180deg)}
.menu a.on{color:var(--naranja)}
.demo-top{text-decoration:none;font-weight:600;color:var(--navy);white-space:nowrap}
.burger{display:none;border:1px solid var(--linea);background:#fff;border-radius:10px;padding:7px 9px;cursor:pointer}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--linea);box-shadow:0 30px 60px rgba(5,23,88,.14)}
.mega-in{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:40px;padding-block:30px 26px}
.mega h5{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--linea);font:700 12.5px var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.mega .col a{display:block;padding:9px 8px;border-radius:10px;text-decoration:none}
.mega .col a:hover{background:var(--fondo-2)}
.mega .col a b{display:block;font:700 16.5px var(--cuerpo);color:var(--tinta)}
.mega .col a small{display:block;color:var(--suave);font-size:13.5px}
.mega .col2 a b{font-weight:600}
.mega .todo{color:var(--navy)!important;font-weight:700;margin-top:6px}
.promo{border:1px solid var(--linea);border-radius:16px;padding:18px}
.promo-img img{width:100%;height:170px;object-fit:cover;border-radius:12px}
.promo-t{display:block;margin:14px 0 12px;padding-bottom:14px;border-bottom:1px solid var(--linea);font-weight:700;color:var(--naranja);text-decoration:none;font-size:16.5px}
.promo-l a{display:block;padding:7px 0;text-decoration:none;font-weight:600;color:var(--tinta)}
.promo-l a:hover,.promo-t:hover{text-decoration:underline}
.mega-pie{background:var(--fondo-2);border-top:1px solid var(--linea)}
.mega-pie .wrap{display:flex;gap:26px;padding-block:13px}
.mega-pie a{text-decoration:none;font-weight:700;color:var(--navy)}
.movil{border-top:1px solid var(--linea);background:#fff;padding-bottom:16px}
.movil details{border-bottom:1px solid var(--linea)}
.movil summary{padding:14px 0;font-weight:700;color:var(--navy);cursor:pointer}
.movil details a{display:block;padding:8px 10px;text-decoration:none}
.movil details a b{display:block;color:var(--tinta);font-weight:600}
.movil details a small{color:var(--suave);font-size:13px}
.mv{display:block;padding:14px 0;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--linea)}
@media (max-width:1100px){.demo-top{display:none}}
@media (max-width:980px){.burger{display:block}.mega{display:none!important}.der .btn{padding:10px 14px;font-size:14.5px}}
.menu .mbtn,.menu a,.der .btn,.der a.entrar{white-space:nowrap}
.menu{gap:0}
@media (max-width:1280px){.demo-top{display:none}}
@media (max-width:1180px){.menu .mbtn,.menu a{padding:8px 9px;font-size:15px}}

/* Pie con columnas de enlaces (también en las páginas internas) */
footer .wrap.pie-cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;align-items:start;padding-bottom:30px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
footer .pcol h4{margin:0 0 12px;font:700 13px var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;color:#fff}
footer .pcol a{display:block;padding:4px 0;color:#c9d1f3;text-decoration:none}
footer .pcol a:hover{color:#fff;text-decoration:underline}
footer .pmarca img{height:26px;filter:brightness(0) invert(1);margin-bottom:14px}
footer .pmarca p{margin:0;max-width:340px;line-height:1.55}
@media (max-width:860px){footer .wrap.pie-cols{grid-template-columns:1fr 1fr}footer .pmarca{grid-column:1/-1}}

/* Sellos de confianza: SOC 2, API y MCP */
.confianza{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0}
.confianza a{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--linea);border-radius:99px;padding:7px 14px;font-size:14.5px;color:var(--texto);text-decoration:none}
.confianza a b{color:var(--navy);font-family:var(--display);font-weight:800}
.confianza a:hover{border-color:var(--navy)}
.seg{background:linear-gradient(180deg,#f3f5ff,#fff)}
.seg-cab p{max-width:760px;margin:16px auto 34px;font-size:18.5px}
.seg-cab .titulo{margin-top:16px}
.seg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.seg-c{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:22px}
.seg-c h3{font-size:20px;margin:14px 0 8px}
.seg-c p{margin:0;font-size:15.5px}
.seg-sello{display:inline-block;border-radius:10px;padding:6px 11px;font:800 13.5px var(--display);background:var(--navy);color:#fff;letter-spacing:.02em}
.seg-sello.ok{background:var(--ok)}
.seg-sello.pronto{background:var(--naranja)}
@media (max-width:980px){.seg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.seg-grid{grid-template-columns:minmax(0,1fr)}}
/* Franja antes del pie (todas las páginas) */
.franja-seg{background:var(--navy);color:#dfe5ff}
.franja-seg .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px;padding-block:18px;font-size:15px}
.franja-seg b{color:#fff;font-family:var(--display);font-weight:800}
.franja-seg a{color:#fff;font-weight:700}