/* Páginas interiores (about, forkfight): mismo marco que la portada.
   El marco tiene el alto de la pantalla menos cabecera (28px) y footer (112px) y,
   como en la portada, su ancho es 16:9 a esa altura sin pasar del ancho disponible. */
:root{
  --txt:#FF0000; --bg:#FFFFFF; --bg-a:rgba(255,255,255,.9);
  --top:28px; --foot:112px;
  --fw:min(100vw - 32px, (100vh - var(--top) - var(--foot)) * 16 / 9);
  --fx:calc((100vw - var(--fw)) / 2);
}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%;background:var(--bg);color:var(--txt)}   /* blanco por defecto */
body{font-family:"IBM Plex Sans",system-ui,sans-serif}

/* MENU: arriba a la izquierda, en la línea de la cabecera */
.menu{position:fixed;left:var(--fx);top:calc(var(--top) - 24.75px);z-index:6}
.menu-btn{background:none;border:0;padding:8px 0;color:var(--txt);font:10px/10px "IBM Plex Mono",monospace;cursor:pointer}
.menu-btn:hover{opacity:.7}
.menu-list{position:fixed;inset:0;z-index:-1;margin:0;padding:0 var(--fx) 101px;list-style:none;background:var(--bg-a);
  display:flex;flex-direction:column;justify-content:flex-end}
.menu-list[hidden]{display:none}
.menu-list a{display:block;color:var(--txt);font:700 82.86px/1 "Barlow Condensed",sans-serif;text-decoration:none;white-space:nowrap}
.menu-list a:hover{opacity:.7}
/* ES | EN: encima de los enlaces, con la letra de MENU; el idioma activo, subrayado */
.menu-list .langs{margin-bottom:16px;color:var(--txt);font:10px/10px "IBM Plex Mono",monospace}
.langs button{background:none;border:0;padding:8px 0;color:inherit;font:inherit;cursor:pointer}
.langs button[aria-pressed=true]{text-decoration:underline;text-underline-offset:3px}
.langs button:hover{opacity:.7}
.menu-btn:focus-visible,.menu-list a:focus-visible,.foot a:focus-visible{outline:2px solid #000;outline-offset:2px}

/* Footer: logo (vuelve a la portada) alineado con el marco */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:7;height:var(--foot);padding:0 var(--fx);display:flex;align-items:center;pointer-events:none}
.foot a{pointer-events:auto;display:block}
/* logo en el color de los textos: el SVG hace de máscara (ruta relativa a este CSS) */
.foot .logo{display:block;height:58px;aspect-ratio:804.43/234.71;background:var(--txt,#FF0000);-webkit-mask:url(logo-famoso.svg) center/contain no-repeat;mask:url(logo-famoso.svg) center/contain no-repeat}

/* Contenido: dentro del marco, entre cabecera y footer; si no cabe, se desplaza ahí dentro sin pasar bajo el logo */
.page{position:fixed;top:var(--top);bottom:var(--foot);left:var(--fx);right:var(--fx);overflow-y:auto;scrollbar-width:none}
.page::-webkit-scrollbar{display:none}