/* GUARDIANA · el marco de app en el teléfono (dueño, 30 Oct 2026, 18:37: «que la página web desde el navegador… parezca una app
   nativa… simple, minimalista, entendible»; ronda 85 de la agencia). Solo en el teléfono (html.marco, que pone marco.js); en el
   PC no hace nada. Barra de pestañas abajo «Inicio · Comunicaciones · Radiografías · Órbita», cabecera compacta arriba con el
   título que aparece al desplazar, transiciones entre páginas como en una app, y respuesta inmediata al toque. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexSans-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexSans-500-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/IBMPlexSans-600-latin.woff2) format('woff2')}

:root{
  --mc-fondo:#06080C; --mc-capa:#0C1118; --mc-capa-2:#111821; --mc-raya:rgba(156,195,228,.12); --mc-raya-2:rgba(156,195,228,.2);
  --mc-texto:#E8ECF1; --mc-apagado:#93A0AD; --mc-tenue:#6F7B88; --mc-acero:#9CC3E4; --mc-acero-suave:rgba(156,195,228,.14);
  --mc-letra:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mc-barra-alto:52px; --mc-cab-alto:44px; --mc-inactiva:#6F7A86; --mc-linea:#1E2631;
  --mc-abajo:calc(var(--mc-barra-alto) + max(env(safe-area-inset-bottom,0px),8px));
}

/* ---------- transiciones entre páginas (solo en el teléfono) ---------- */
@media (max-width:760px){
  @view-transition{navigation:auto}
}
/* entre pestañas, un fundido de 150 ms; hacia una página de dentro, 24 px y un fundido de 220 ms; atrás, al revés (con el gesto
   del sistema no se anima: lo hace el propio teléfono) */
html.marco::view-transition-old(root){animation:mc-sale .15s ease-in both}
html.marco::view-transition-new(root){animation:mc-entra .15s ease-out both}
html.marco:active-view-transition-type(adelante)::view-transition-old(root){animation:mc-sale-izq .22s cubic-bezier(.3,.7,.3,1) both}
html.marco:active-view-transition-type(adelante)::view-transition-new(root){animation:mc-entra-der .22s cubic-bezier(.2,.8,.2,1) both}
html.marco:active-view-transition-type(atras)::view-transition-old(root){animation:mc-sale-der .22s cubic-bezier(.3,.7,.3,1) both}
html.marco:active-view-transition-type(atras)::view-transition-new(root){animation:mc-entra-izq .22s cubic-bezier(.2,.8,.2,1) both}
html.marco .mc-pestanas{view-transition-name:mc-pestanas}
html.marco::view-transition-group(mc-pestanas){animation:none}
html.marco::view-transition-old(mc-pestanas),html.marco::view-transition-new(mc-pestanas){animation:none}
@keyframes mc-sale{to{opacity:0}}
@keyframes mc-entra{from{opacity:0}}
@keyframes mc-sale-izq{to{transform:translateX(-24px);opacity:0}}
@keyframes mc-entra-der{from{transform:translateX(24px);opacity:0}}
@keyframes mc-sale-der{to{transform:translateX(24px);opacity:0}}
@keyframes mc-entra-izq{from{transform:translateX(-24px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  html.marco::view-transition-old(root),html.marco::view-transition-new(root){animation:none!important}
}

/* ---------- el lienzo: como una app ---------- */
html.marco{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--mc-fondo);overscroll-behavior-y:contain;scroll-padding-bottom:calc(var(--mc-abajo) + 24px)}
html.marco body{-webkit-tap-highlight-color:transparent;padding-bottom:calc(var(--mc-abajo) + 24px)!important}
html.marco.mc-sin-pestanas body{padding-bottom:0!important}
html.marco a,html.marco button,html.marco [role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html.marco .mc-pestanas,html.marco .mc-cabecera,html.marco button,html.marco [role=tab]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.marco input,html.marco textarea,html.marco select{font-size:max(16px,1em)} /* sin zoom al escribir */

/* ---------- la barra de pestañas ---------- */
.mc-pestanas{display:none}
html.marco .mc-pestanas{position:fixed;z-index:60;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);
  height:var(--mc-abajo);padding:0 max(6px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-right,0px));
  background:#080B10;border-top:.5px solid var(--mc-linea);font-family:var(--mc-letra);box-sizing:border-box;transition:transform .2s ease}
html.marco.mc-teclado .mc-pestanas{transform:translateY(110%)}
html.marco .mc-pestanas a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--mc-barra-alto);
  color:var(--mc-inactiva);text-decoration:none;font:500 11px/1.1 var(--mc-letra);letter-spacing:.005em;min-width:0;position:relative}
html.marco .mc-pestanas a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
html.marco .mc-pestanas svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s ease}
html.marco .mc-pestanas a[aria-current=page]{color:var(--mc-acero)}
html.marco .mc-pestanas a[aria-current=page] span{font-weight:600}
html.marco .mc-pestanas a:active svg{transform:scale(.88)}
html.marco .mc-pestanas a:focus-visible{outline:2px solid var(--mc-acero);outline-offset:-4px;border-radius:10px}

/* ---------- la cabecera compacta (el título aparece al desplazar, como en iOS) ---------- */
.mc-cabecera{display:none}
html.marco .mc-cabecera{position:fixed;z-index:59;left:0;right:0;top:0;display:grid;grid-template-columns:minmax(64px,auto) 1fr minmax(64px,auto);align-items:center;
  height:calc(var(--mc-cab-alto) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px));
  box-sizing:border-box;font-family:var(--mc-letra);color:var(--mc-texto);background:transparent;border-bottom:.5px solid transparent;
  transition:background-color .2s ease,border-color .2s ease}
html.marco .mc-cabecera.llena{background:rgba(6,8,12,.92);border-bottom-color:var(--mc-linea)}
html.marco .mc-cabecera .mc-t{grid-column:2;text-align:center;font:600 17px/1.2 var(--mc-letra);letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(3px);transition:opacity .15s ease,transform .15s ease}
html.marco .mc-cabecera.llena .mc-t,html.marco .mc-cabecera.siempre .mc-t{opacity:1;transform:none}
html.marco .mc-cabecera .mc-atras{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 8px 0 2px;border:0;background:none;color:var(--mc-acero);font:400 16px/1 var(--mc-letra);text-decoration:none;cursor:pointer}
html.marco .mc-cabecera .mc-atras svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.marco .mc-cabecera .mc-atras:active{opacity:.45}
html.marco .mc-cabecera .mc-der{grid-column:3;justify-self:end;display:flex;align-items:center;gap:4px}
html.marco .mc-hueco-cab{height:calc(var(--mc-cab-alto) + env(safe-area-inset-top,0px))}

/* ---------- el título grande de cada pestaña ---------- */
html.marco .mc-grande{margin:0;padding:6px 20px 10px;font:600 28px/1.15 var(--mc-letra);letter-spacing:-.012em;color:var(--mc-texto);text-wrap:balance}

/* toques: respuesta al momento, sin el resaltado gris del navegador */
html.marco .mc-toque{transition:transform .12s ease,background-color .12s ease,opacity .12s ease}
html.marco .mc-toque:active{transform:scale(.985);opacity:.86}
html.marco :focus{outline:none}
html.marco :focus-visible{outline:2px solid var(--mc-acero);outline-offset:2px}

/* ---------- las páginas dentro del marco ---------- */
/* Radiografías, Cómo funciona, Términos, Privacidad y ZERO: fuera su cabecera de siempre (logo, menú, «Empezar»); la misma letra
   que el resto de la app (Plex, no la serif); el título de la página, 28 px */
html.marco header.top{display:none!important}
html.marco main :is(h1,h2,h3){font-family:var(--mc-letra)!important;letter-spacing:-.01em!important}
html.marco main h1.mc-titulo-pagina{font:500 28px/1.15 var(--mc-letra)!important;letter-spacing:-.012em!important;text-wrap:balance}
html.marco main h2{font-weight:500!important}

/* Órbita: el planeta a pantalla completa entre arriba y la barra de pestañas; sin «‹ Inicio» ni la barra de puertas */
html.marco body.m2 #volver,html.marco body.m2 #puertas,html.marco body.m2 header .marca{display:none!important}
html.marco body.m2 #conexion-btn{bottom:calc(var(--mc-abajo) + 12px)!important}
html.marco body.m2 .ficha-panel{bottom:var(--mc-abajo)!important}
html.marco body.m2{padding-bottom:0!important}
html.marco .mc-orbita-t{position:fixed;z-index:61;left:max(20px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 10px);height:40px;display:flex;align-items:center;
  font:600 20px/1 var(--mc-letra);letter-spacing:-.005em;color:var(--mc-texto);text-shadow:0 1px 12px rgba(0,0,0,.7);pointer-events:none}