/* Tema claro de Kivorium — se carga DESPUES del <style> de cada pagina
   y la sobreescribe. Fuente unica de la paleta clara: si cambia aqui,
   cambia en todo el sitio. Extraido de index.html el 04/11/2026. */
html{overflow-x:hidden;overflow-x:clip}

:root{
  --bg:#F4FAF9; --bg2:#EAF5F3; --ink:#183B39; --dim:#536D69; --faint:#5C7471;
  --teal:#087D76; --teal2:#086D67; --mint:#78DDD4;
  --hair:rgba(24,59,57,.12); --card:rgba(255,255,255,.88);
  --accent-soft:#E6F7F4; --shadow:rgba(36,91,85,.10);
}
body{background:var(--bg);color:var(--ink);caret-color:var(--teal)}
::selection{background:#BDEDE7;color:#153B38}
body::before{opacity:0}
.glow,.gridfloor{display:none}

nav{
  top:16px;background:rgba(255,255,255,.92);border-color:var(--hair);
  box-shadow:0 10px 36px rgba(36,91,85,.10),inset 0 1px 0 rgba(255,255,255,.95);
}
nav .brand{flex-direction:row;gap:9px;color:var(--ink);font-size:13px}
nav .brand .klogo{height:36px;filter:none}
nav .links a{color:var(--dim)}
nav .links a:hover{color:var(--ink)}
nav .links a.active{color:var(--teal)}

.btn{white-space:nowrap;transition:transform .22s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease)}
.btn .ic{transition:transform .22s var(--ease)}
.btn.primary{background:linear-gradient(135deg,#8DE5DC,#48CDC3 62%,#28B9AF);color:#153B38;box-shadow:0 8px 22px rgba(25,160,150,.18),inset 0 1px 0 rgba(255,255,255,.65)}
.btn.primary::after{display:none}
.btn.primary .ic{background:rgba(21,76,71,.10)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(25,160,150,.24)}
.btn.ghost{background:rgba(255,255,255,.82);color:var(--ink);border-color:var(--hair)}
.btn.ghost .ic{background:var(--accent-soft)}
.btn.ghost:hover{transform:translateY(-2px);background:#fff}
.btn.primary:active,.btn.ghost:active{transform:scale(.98)}

.eyebrow{border-color:rgba(8,125,118,.14);background:rgba(255,255,255,.72);color:var(--dim)}
.eyebrow .dot{box-shadow:none}
.hero{isolation:isolate}
.hero::before{
  content:'';position:absolute;inset:12% -16% 8% 44%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(157,226,219,.30),transparent 68%);
}
.hero h1 em{background:none;color:var(--teal);animation:none}
.hero .sub,.sec-head p,.card p,.mod p,.step p,.trustcard p,details .ans{color:var(--dim)}
.trust span{color:var(--dim)}
.trust svg{stroke:var(--teal)}

.orbit-stage::before{opacity:.45;animation:none}
.orbit-stage::after{border-color:rgba(8,125,118,.10);animation:none}
.modcard{
  color:var(--ink);background:rgba(255,255,255,.94);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:var(--hair);box-shadow:0 12px 32px rgba(36,91,85,.09),inset 0 1px 0 #fff;
  animation:none;
}
.modcard:hover{transform:translateX(-4px);border-color:rgba(8,125,118,.24);box-shadow:0 18px 38px rgba(36,91,85,.13)}
.modcard .mi,.mod .mi,.card .k-ico,.step .n,.dl-step .n{background:var(--accent-soft);border-color:rgba(8,125,118,.13)}
.modcard span{color:var(--dim)}
.modcard .mp,.mod .go{color:var(--teal)}

section + section::before{background:linear-gradient(90deg,transparent,rgba(24,59,57,.10),transparent)}
.card,.mod,.step,.dl-step{
  background:rgba(255,255,255,.9);border-color:var(--hair);
  box-shadow:0 12px 32px rgba(36,91,85,.055),inset 0 1px 0 #fff;
}
.card:hover,.mod:hover{border-color:rgba(8,125,118,.22);background:#fff;box-shadow:0 18px 40px rgba(36,91,85,.11),inset 0 1px 0 #fff}
.step{transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease)}
.step:hover{transform:translateY(-3px);border-color:rgba(8,125,118,.20);box-shadow:0 16px 34px rgba(36,91,85,.09)}
.mod .mp{color:var(--ink)}
.mod .pname,.grouplabel{color:var(--teal)}
.grouplabel.muted{color:var(--faint)}
.tagsoon{color:var(--faint);border-color:var(--hair)}
.modcard.soon,.mod.soon{opacity:.76}
.modcard.soon:hover,.mod.soon:hover{border-color:rgba(24,59,57,.16)}

.step .bubble{background:#EAF7F5;border-color:rgba(8,125,118,.12);color:#315D58}
.step .bubble.wa{background:#E4F4EC;border-color:#D1E9DC;color:#285A48}
.step .bubble.ok{color:var(--teal)}
.trial-strip{border-color:rgba(8,125,118,.18);background:#EAF7F5;color:var(--dim)}
.trial-strip b{color:var(--teal)}
.trustcard .k-ico{background:var(--accent-soft)}

details{background:rgba(255,255,255,.88);border-color:var(--hair)}
details:hover{border-color:rgba(8,125,118,.20)}
details[open]{border-color:rgba(8,125,118,.20);background:#F0F9F7}
summary::after{color:var(--teal)}

.final{background:linear-gradient(145deg,#E4F6F3,#F6FBFA 72%);border-color:rgba(8,125,118,.16)}
.final::before{background:radial-gradient(ellipse,rgba(120,221,212,.25),transparent 70%)}
.final p{color:var(--dim)}
.dl{background:rgba(255,255,255,.92);border-color:var(--hair);box-shadow:0 20px 54px rgba(36,91,85,.09),inset 0 1px 0 #fff}
.dl::before{background:radial-gradient(ellipse,rgba(120,221,212,.20),transparent 70%)}
.dl-head img{filter:none}
.dl-head span,.dl-meta span{color:var(--dim)}
.dl-meta span{background:#F2F8F7;border-color:var(--hair)}
.dl-note{color:var(--dim)}
.dl-note a{color:var(--teal)}
.dl-step{background:rgba(255,255,255,.9);border-color:var(--hair)}
.dl-step p{color:var(--dim)}

footer{border-color:var(--hair)}
footer small,footer a{color:var(--dim)}
footer a:hover{color:var(--ink)}
:focus-visible{outline-color:var(--teal)}
.burger{background:#fff;border-color:var(--hair)}
.burger span{background:var(--ink)}
.burger:hover{border-color:rgba(8,125,118,.3)}
.mmenu{background:rgba(247,251,250,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.mmenu a{color:var(--ink);border-color:var(--hair)}
.mmenu a:hover,.mmenu a.active,.mmenu a[href="#apps"]{color:var(--teal)}

@media (prefers-reduced-motion:reduce){
  .mc1,.mc2,.mc3,.mc4,.mc5,.mc6,.orbit-stage::before,.orbit-stage::after{animation:none}
}
@media (max-width:600px){
  .hero::before{inset:30% -34% 0 18%}
  nav .brand .klogo{height:32px}
}

/* ——— componentes propios de las paginas de producto ———
   (negocios, agenda, legado, educacion, escuela-ia, servicios)
   Los selectores que una pagina no usa no hacen nada. */
.phone-stage::before,.coach-stage::before,.rutas-stage::before{opacity:.35;animation:none}
.phone-stage::after,.coach-stage::after,.rutas-stage::after{border-color:rgba(8,125,118,.12);animation:none}
.phone-outer{
  background:linear-gradient(160deg,#FFFFFF,#E4F1EF);
  box-shadow:0 40px 90px rgba(36,91,85,.18),0 18px 40px rgba(36,91,85,.12),inset 0 1px 1px #fff;
}
.phone-inner{border-color:rgba(24,59,57,.18)}
.coach-panel,.rutas-panel{
  background:rgba(255,255,255,.94);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--hair);
  box-shadow:0 24px 60px rgba(36,91,85,.14),inset 0 1px 0 #fff;
}
.msg.coach{background:#E9F8F6;border-color:rgba(8,125,118,.22);color:#17423F}
.msg.coach b{color:var(--teal)}
.ruta{background:#F4FAF9;border-color:var(--hair)}
.ruta .ri{background:var(--accent-soft);border-color:rgba(8,125,118,.16)}
.float-card{
  background:rgba(255,255,255,.96);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:var(--hair);box-shadow:0 18px 44px rgba(36,91,85,.14);color:var(--ink);
}
.flow-arrow{color:var(--teal);text-shadow:none}
@keyframes pulse-arrow{0%,100%{opacity:.6}50%{opacity:1;text-shadow:none}}
.plan{
  background:rgba(255,255,255,.92);border-color:var(--hair);
  box-shadow:0 12px 32px rgba(36,91,85,.07),inset 0 1px 0 #fff;
}
.plan:hover{border-color:rgba(8,125,118,.22);box-shadow:0 20px 48px rgba(36,91,85,.12),inset 0 1px 0 #fff}
.plan.hero-plan{background:linear-gradient(160deg,#E4F6F3,#FFFFFF 72%)}
.plan.hero-plan .pname{color:var(--teal)}
.plan .price{color:var(--ink)}
.othermods a{background:rgba(255,255,255,.9);border-color:var(--hair);color:var(--dim)}
.othermods a:hover{border-color:rgba(8,125,118,.3);color:var(--ink)}
.card.shot img{border-color:var(--hair)}
.mmenu a[data-apk]{color:var(--teal)}

/* ===================================================================
   Correcciones compartidas (04/11/2026) — auditoria UX/UI
   Viven aqui para que valgan en las 7 paginas a la vez: el motivo de
   los defectos anteriores fue que un arreglo se hacia solo en index.
   =================================================================== */

/* 1. Los anclajes (#apps, #faq, #precio...) aterrizaban debajo de la
      barra fija. La nav mide ~65px en escritorio y ~96px en movil. */
html{scroll-padding-top:120px}

/* 2. La pagina arrancaba invisible: .rv es opacity:0 y solo el
      IntersectionObserver la revela. Sin JS no se veia nada. */
@media (scripting:none){
  .rv{opacity:1 !important;transform:none !important;filter:none !important}
}

/* 3. El menu movil se ocultaba solo con opacity:0, asi que sus 10
      enlaces seguian capturando el foco del teclado en escritorio. */
.mmenu{visibility:hidden}
.mmenu.open{visibility:visible}

/* 4. Objetivos tactiles: WCAG 2.5.5 pide 44x44 CSS px. */
.go{display:inline-flex;align-items:center;min-height:44px;transition:color .2s var(--ease),transform .2s var(--ease)}
.go:hover{transform:translateX(3px)}
.btn.sm{min-height:44px;padding-top:5px;padding-bottom:5px}
.burger{width:44px;height:44px}
footer .row a{display:inline-flex;align-items:center;min-height:44px}

/* 5. "Escuela de IA" partia en dos renglones y descuadraba la nav. */
nav .links a{white-space:nowrap}

/* 6. Los controles de formulario heredaban Arial en vez del sistema. */
button,input,select,textarea{font:inherit}

/* 7. Elevacion unificada: .modcard se movia en X y el resto en Y. */
.modcard:hover{transform:translateY(-3px)}

/* 8. El punto de la pildora flotaba entre renglones cuando el texto
      partia en dos lineas. */
.eyebrow{align-items:baseline}
.eyebrow .dot{transform:translateY(-1px)}

/* 9. Enlace "saltar al contenido": invisible hasta recibir el foco. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:var(--ink);border:1px solid var(--teal);
  border-radius:0 0 12px 0;padding:14px 20px;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

@media (max-width:900px){
  /* 10. La tarjeta flotante fc2 se salia 9px del viewport. */
  .fc2{right:0}
}

/* 11. Las 6 paginas interiores declaraban .hero{padding:170px 0 110px},
      shorthand que ponia a 0 el padding horizontal de .wrap: el texto
      del heroe pegaba a los dos bordes en movil. index ya usaba
      padding-block; esta regla lo arregla en todas a la vez. */
.hero{padding-inline:28px}

/* 12. BUG REAL, ya estaba en vivo: las capturas de pantalla llevan
      width="1080" height="2412" como atributos y el CSS solo fijaba
      el ancho. Sin height:auto el navegador respeta la altura del
      atributo: el movil del heroe de negocios.html medira 2.412px y
      empuja el titular 1.200px por debajo del pliegue.
      Regla de elemento (0,0,1): cualquier .clase img que fije altura
      propia la sigue ganando. */
img{height:auto}