/* Índice a pantalla completa, compartido por todas las páginas (Plan de la web › Navegación).
   Colores de la familia Escarcha escritos directo, porque cada página define sus propios tokens. */
.ix-btn{position:fixed;z-index:1001;left:max(16px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));
  height:40px;padding:0 15px 0 13px;border-radius:99px;display:flex;align-items:center;gap:9px;cursor:pointer;
  font:400 13px/1 "Satoshi",system-ui,sans-serif;letter-spacing:.01em;color:#B7C7CF;
  background:color-mix(in srgb,#1A2126 80%,transparent);border:1px solid color-mix(in srgb,#CFE6F3 22%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;
  transition:transform .6s cubic-bezier(.34,1.45,.64,1),opacity .4s cubic-bezier(.4,0,.2,1),border-color .4s,color .4s}
.ix-btn:focus-visible{outline:1px solid #CFE6F3;outline-offset:3px}
.ix-btn.oculto{transform:translateY(-72px);opacity:0;pointer-events:none}
@media (hover:hover){.ix-btn:not(.oculto):hover{transform:translateY(-2px);color:#E8EEF1;border-color:color-mix(in srgb,#CFE6F3 45%,transparent)}}
.ix-btn i{display:block;position:relative;top:-2.5px;width:14px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.34,1.45,.64,1)}
.ix-btn i::after{content:"";position:absolute;left:0;top:5px;width:10px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.34,1.45,.64,1),width .3s}
.ix-btn.on i{transform:translateY(2.5px) rotate(45deg)}
.ix-btn.on i::after{transform:translateY(-5px) rotate(-90deg);width:14px}

html.ix-abierto{overflow:hidden}
.ix{position:fixed;inset:0;z-index:1000;overflow:auto;display:flex;flex-direction:column;justify-content:center;
  padding:max(96px,calc(env(safe-area-inset-top) + 80px)) max(24px,10vw) max(72px,calc(env(safe-area-inset-bottom) + 56px));
  background:color-mix(in srgb,#141A1D 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1);outline:none}
.ix[hidden]{display:none}
.ix.abierto{opacity:1}
.ix-deco{position:fixed;right:-100px;bottom:-120px;width:min(460px,90vw);height:min(460px,90vw);opacity:.06;pointer-events:none;animation:ix-girar 90s linear infinite}
.ix-deco svg{width:100%;height:100%}
.ix-nav{position:relative;display:grid;gap:4px;max-width:760px}
.ix-g{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;width:fit-content;text-decoration:none;
  font:400 clamp(34px,9vw,56px)/1.15 "Satoshi",system-ui,sans-serif;letter-spacing:-.01em;color:#A4B3BB;
  opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(0,0,.2,1),transform .7s cubic-bezier(0,0,.2,1),color .35s}
.ix-g small{font:400 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;color:#7E8B93}
.ix-g:hover,.ix-g.act{color:#E8EEF1}
.ix-g:focus-visible,.ix-sub a:focus-visible,.ix-pie a:focus-visible{outline:1px solid #CFE6F3;outline-offset:4px;border-radius:6px}
.ix-sub{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px;opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(0,0,.2,1),transform .7s cubic-bezier(0,0,.2,1)}
.ix-sub a{padding:7px 14px;border-radius:99px;border:1px solid #455056;font:400 13px/1.2 "Inter",system-ui,sans-serif;color:#B7C7CF;text-decoration:none;
  transition:border-color .3s,color .3s,transform .5s cubic-bezier(.34,1.45,.64,1)}
.ix-sub a:hover{color:#E8EEF1;border-color:#58646A;transform:translateY(-2px)}
.ix-sub a.act{color:#E8EEF1;border-color:color-mix(in srgb,#CFE6F3 45%,transparent)}
.ix.abierto .ix-g,.ix.abierto .ix-sub{opacity:1;transform:none;transition-delay:calc(.08s + var(--i,0) * 70ms)}
.ix-pie{position:fixed;left:max(24px,10vw);bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));font:400 12px/1 "Inter",system-ui,sans-serif;color:#7E8B93}
.ix-pie a{color:inherit;text-decoration:none}
.ix-pie a:hover{color:#A4B3BB}
@keyframes ix-girar{to{transform:rotate(360deg)}}

/* «otras herramientas» dentro de cada herramienta (solo aparece si hay otra) */
.ix-otras{position:relative}
.ix-otras>button{display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:99px;border:1px solid #455056;background:none;cursor:pointer;
  font:400 12.5px/1 "Inter",system-ui,sans-serif;color:#B7C7CF;transition:border-color .3s,color .3s}
.ix-otras>button:hover{color:#E8EEF1;border-color:#58646A}
.ix-otras>button svg{width:12px;height:12px;transition:transform .45s cubic-bezier(.34,1.45,.64,1)}
.ix-otras.abierto>button svg{transform:rotate(180deg)}
.ix-otras .lista{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:min(320px,86vw);padding:8px;border-radius:18px;border:1px solid #455056;
  background:color-mix(in srgb,#1A2126 95%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px #000;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .3s,transform .45s cubic-bezier(.34,1.45,.64,1)}
.ix-otras.abierto .lista{opacity:1;transform:none;pointer-events:auto}
.ix-otras .lista a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;color:#E8EEF1;transition:background-color .3s}
.ix-otras .lista a:hover{background:color-mix(in srgb,#323C41 70%,transparent)}
.ix-otras .lista b{display:block;font:500 14px/1.2 "Satoshi",system-ui,sans-serif}
.ix-otras .lista span{display:block;margin-top:3px;font:400 12px/1.4 "Inter",system-ui,sans-serif;color:#A4B3BB}
@media (max-width:560px){.ix-otras{margin-left:0!important}.ix-otras .lista{left:0;right:auto;transform-origin:top left}}

@media (prefers-reduced-motion:reduce){
  .ix-btn,.ix,.ix-g,.ix-sub,.ix-btn i,.ix-btn i::after,.ix-otras .lista{transition-duration:.01ms!important;transition-delay:0s!important}
  .ix-deco{animation:none}
  .ix-btn.oculto{transform:none;opacity:1;pointer-events:auto}
}