/* ============================================================
   isla.css — menú "isla dinámica" de la portada ArcGestor (2026-10-04).
   Una cápsula flotante centrada, oscura y translúcida en los DOS temas (como la isla del iPhone).
   · Escritorio: expandida arriba (logo · enlaces · sesión · tema · CTA). Al hacer scroll se CONTRAE a
     logo + estado vivo + CTA; se expande con resorte al pasar el puntero, enfocar o volver arriba.
   · Móvil: isla compacta (logo + CTA + menú) que se EXPANDE en el panel del menú, con X visible.
   Nada anima width/height: solo clip-path, transform y opacity (sin reflow ni CLS; el espacio lo
   reserva el padding-top del héroe). Sobrescribe .nav/.mmenu de assets/v2/componentes.css (solo
   lectura). Comportamiento en assets/isla.js. Reduced-motion: sin rebotes ni transiciones.
   ============================================================ */

.nav{--isla-h:56px;--isla-r:28px;--isla-bg:rgba(22,19,15,.86);--isla-bg2:rgba(255,255,255,.07);--isla-line:rgba(255,255,255,.12);
  --isla-tx:#F2EFE9;--isla-tx2:rgba(242,239,233,.74);--isla-tx3:rgba(242,239,233,.58);--isla-res:560ms;
  position:fixed;top:12px;left:0;right:0;z-index:300;height:auto;display:flex;justify-content:center;align-items:flex-start;
  pointer-events:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;transition:none}
html[data-theme="dark"] .nav{--isla-bg:rgba(34,31,28,.84);--isla-line:rgba(255,255,255,.14)}
.nav.scrolled{border:0;box-shadow:none}
.nav::after{display:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── La cápsula ── */
.nav-isla{--isla-i:0px;pointer-events:auto;position:relative;display:flex;flex-direction:column;max-width:calc(100vw - 24px);
  color:var(--isla-tx);background:var(--isla-bg);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--isla-line);border-radius:var(--isla-r);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 12px 32px -14px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.18);
  clip-path:inset(0 var(--isla-i) 0 var(--isla-i) round var(--isla-r));
  /* expandir: resorte (el rebote hacia fuera no se ve: nada se pinta más allá de la caja); contraer: ease-out para no
     cortar el contenido con el rebote. Los desplazamientos van en ease-out por lo mismo; el rebote visible lo ponen
     los enlaces (escala) y el estado al entrar. */
  transition:clip-path var(--isla-res) var(--ease-spring)}
.isla-fila{position:relative;display:flex;align-items:center;gap:16px;height:var(--isla-h);padding:0 8px 0 12px;flex:0 0 auto}

/* logo: arco original + palabra; viga clara y centros del color de la isla */
.nav-isla .nav-logo{--logo-viga:#F2EFE9;--logo-centro:#1A1715;height:auto;gap:9px;color:var(--isla-tx);border-radius:999px;transition:transform var(--isla-res) var(--ease-out)}
.nav-isla .nav-logo svg.logo-ico{height:26px;width:auto}
/* lo que desaparece al contraer: se funde rápido al salir y entra con retraso (cuando el logo y el CTA ya llegaron) */
.nav-isla .logo-pal,.nav-isla .nav-links,.nav-isla .btn-fantasma,.nav-isla .btn-icono{transition:opacity 240ms var(--ease-out) 200ms,visibility 0s linear 0s}
.nav-isla .logo-pal{color:var(--isla-tx);font-size:19px}
.nav-isla .nav-logo:focus-visible{outline-color:#FB923C}

/* enlaces con la píldora deslizante (isla.js escribe --x/--w/--o) */
.nav-isla .nav-links{margin:0 2px;gap:2px;transition:opacity 240ms var(--ease-out) 200ms,visibility 0s linear 0s,transform var(--isla-res) var(--ease-spring) 120ms}
.nav-isla .nav-links>li>a{height:34px;padding:0 12px;font-size:14px;color:var(--isla-tx2)}
.nav-isla .nav-links>li>a:hover,.nav-isla .nav-links>li>a[aria-current="true"]{color:var(--isla-tx)}
.nav-isla .nav-links>li>a:focus-visible{outline:2px solid #FB923C;outline-offset:-2px}
.nav-isla .nav-ind{height:34px;background:var(--isla-bg2);border-color:rgba(255,255,255,.10)}
/* punto verde "disponible" junto a Mitic (el estado vivo de la isla expandida) */
.vivo{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22C55E;margin-left:7px;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:isla-pulso 2.4s ease-out infinite}
@keyframes isla-pulso{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* derecha: sesión (fantasma) · tema · CTA · hamburguesa */
.nav-isla .nav-r{gap:8px;transition:transform var(--isla-res) var(--ease-out)}
.nav-isla .btn-fantasma{color:var(--isla-tx2);font-weight:500;padding:0 8px}
.nav-isla .btn-fantasma .ic{color:currentColor;stroke:currentColor;fill:none}
.nav-isla .btn-fantasma:hover{color:#FDBA74}
.nav-isla .btn-fantasma::after{background:#FB923C}
.nav-isla .btn-fantasma:focus-visible{outline-color:#FB923C}
.nav-isla .btn-icono{width:36px;height:36px;--btn-h:36px;background:transparent;color:var(--isla-tx2);border-color:transparent}
.nav-isla .btn-icono:hover{background:var(--isla-bg2);border-color:rgba(255,255,255,.3)}
.nav-isla .btn-icono:focus-visible{outline-color:#FB923C}
.nav-isla .btn-primario{--btn-h:40px;--btn-px:16px;font-size:14.5px}
.nav-isla .btn-primario:focus-visible{outline-color:#FDBA74}

/* estado vivo (solo en la isla contraída): "● Mitic disponible" o la sección actual del scrollspy */
.isla-estado{position:absolute;left:var(--isla-s,50%);top:50%;margin:0;transform:translateY(-50%) scale(.8);transform-origin:left center;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--f-mono);font-size:12.5px;font-weight:500;color:var(--isla-tx);opacity:0;visibility:hidden;
  transition:opacity 160ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s linear 160ms}
.isla-estado .punto{width:7px;height:7px;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:isla-pulso 2.4s ease-out infinite}
.isla-estado[data-vivo="no"] .punto{background:#FB923C;box-shadow:none;animation:none}
.isla-estado span{display:inline-block}
.isla-estado.cambia span{animation:isla-cambia var(--d-3) var(--ease-out)}
@keyframes isla-cambia{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Escritorio: contraída ── (isla.js mide --isla-ci = recorte por lado y --isla-s = x del estado) */
@media(min-width:921px){
  .burger,.mmenu,.isla-velo{display:none}
  .nav-isla.compacta{--isla-i:var(--isla-ci,0px);transition:clip-path 420ms var(--ease-out)}
  .nav-isla.compacta .nav-logo{transform:translateX(var(--isla-ci,0px));transition-duration:420ms}
  .nav-isla.compacta .nav-r{transform:translateX(calc(-1 * var(--isla-ci,0px)));transition-duration:420ms;pointer-events:none} /* su caja (sesión y tema invisibles) tapaba el logo al puntero */
  .nav-isla.compacta .nav-r .btn-primario{pointer-events:auto}
  .nav-isla.compacta .logo-pal,.nav-isla.compacta .nav-links,.nav-isla.compacta .btn-fantasma,.nav-isla.compacta .btn-icono{opacity:0;visibility:hidden;transition:opacity 140ms var(--ease-out) 0s,visibility 0s linear 140ms}
  .nav-isla.compacta .nav-links{transform:scale(.9);transition:opacity 140ms var(--ease-out) 0s,visibility 0s linear 140ms,transform 420ms var(--ease-out) 0s}
  .nav-isla.compacta .isla-estado{position:static;flex:none;opacity:1;visibility:visible;transform:none;margin-left:14px;max-width:none;overflow:visible;-webkit-mask-image:none;mask-image:none;transition:opacity 200ms var(--ease-out) 260ms,visibility 0s linear 0s}
  .nav-isla.compacta .nav-links,.nav-isla.compacta .btn-fantasma,.nav-isla.compacta .btn-icono,.nav-isla.compacta .logo-pal{display:none}
}

/* ── Móvil: isla compacta a lo ancho que se expande en el panel del menú ── */
@media(max-width:920px){
  .nav{left:12px;right:12px;top:10px}
  .nav-isla{width:100%;max-width:none;max-height:calc(100dvh - 20px);max-height:calc(100vh - 20px);
    clip-path:inset(0 0 calc(100% - var(--isla-h)) 0 round var(--isla-r))} /* cerrado: solo la fila (el menú está hidden y la isla mide 56 px) */
  .nav-isla.abierta{clip-path:inset(0 0 0 0 round var(--isla-r))}
  .isla-fila{gap:10px;padding:0 8px 0 12px}
  .nav-isla .nav-links,.nav-isla .btn-fantasma,.nav-isla .btn-icono,.isla-estado{display:none}
  .nav-isla .nav-logo{margin-right:auto;flex:0 1 auto;min-width:0}
  .nav-isla .nav-r{gap:8px;flex:0 0 auto}
  .nav-isla .btn-primario{--btn-h:38px;--btn-px:14px;font-size:14px;transition:opacity var(--d-2) var(--ease-out),visibility 0s,transform var(--d-2),box-shadow var(--d-2),background-position .7s}
  .nav-isla.abierta .isla-fila .btn-primario{opacity:0;visibility:hidden;transition-delay:0s,var(--d-2)} /* el CTA grande vive en el pie del menú */
  .burger{display:grid;width:40px;height:40px;z-index:1;background:transparent;border-color:var(--isla-line)}
  .burger span{background:var(--isla-tx);left:10px}
  .burger:hover{background:var(--isla-bg2)}
  .burger:focus-visible{outline:2px solid #FB923C;outline-offset:2px}
  /* el menú vive DENTRO de la isla (cerrado = hidden + inert) */
  .mmenu{position:static;inset:auto;z-index:auto;background:transparent;clip-path:none;visibility:visible;opacity:1;
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 10px 12px;transition:none}
  .mmenu[hidden]{display:none}
  .mmenu>ul>li>a{font-size:clamp(21px,5.6vw,26px);padding:13px 6px;color:var(--isla-tx);border-bottom-color:var(--isla-line)}
  .mmenu>ul>li>a .ic{color:var(--isla-tx3)}
  .mmenu>ul>li>a:focus-visible{outline:2px solid #FB923C;outline-offset:-2px;border-radius:8px}
  .mmenu li{transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out)}
  .nav-isla.abierta .mmenu li{opacity:1;transform:none}
  .mmenu-foot{padding-top:14px;gap:8px;margin-top:6px}
  .mmenu .btn-secundario{background:transparent;color:var(--isla-tx);border-color:rgba(242,239,233,.32);box-shadow:none}
  .mmenu .btn-secundario:hover{background:var(--isla-bg2);border-color:var(--isla-tx)}
  .mmenu .btn:focus-visible{outline-color:#FB923C}
  .mmenu-meta{color:var(--isla-tx3)}
  .mmenu-meta .tema{display:inline-flex}
  /* velo oscuro bajo la isla abierta; tocarlo cierra */
  .isla-velo{position:fixed;inset:0;z-index:-1;background:rgba(10,9,8,.42);opacity:0;pointer-events:none;transition:opacity var(--d-3) var(--ease-out)}
  .nav.abierta .isla-velo{opacity:1;pointer-events:auto}
}
@media(max-width:480px){
  .nav-isla .nav-logo svg.logo-ico{height:24px}
  .nav-isla .logo-pal{font-size:18px}
  .nav-isla .nav-logo{gap:8px}
  .isla-fila .btn-primario .ic{display:none}
}

/* ── Movimiento reducido: sin resorte, cambios inmediatos ── */
@media (prefers-reduced-motion:reduce){
  .nav-isla,.nav-isla .nav-logo,.nav-isla .nav-links,.nav-isla .nav-r,.isla-estado,.nav-isla .btn-fantasma,.nav-isla .btn-icono,.nav-isla .logo-pal,.isla-velo{transition:none!important}
  .vivo,.isla-estado .punto{animation:none;box-shadow:none}
  .isla-estado.cambia span{animation:none}
}