:root {
  --black: #000;
  --red: #ff0000;
  --white: #f2f2f2;
  --serif: "Tinos", "Times New Roman", Times, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--black);
  overflow: hidden; /* pantalla fija, sin scroll */
}

body {
  color: var(--white);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/*
  Todo se mide contra el tamaño del marco (vh / vw / vmin), no contra valores fijos.
  Así la pantalla se ajusta sola a cualquier tamaño de bloque (incluido el de Google Sites)
  y a compu, tablet y celular, sin que aparezca scroll.
*/
.screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 2vh 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9vh;
  overflow: hidden;
}

.logo {
  /* el ancho no supera ni el 70% del ancho ni lo que permite el 55% del alto (proporción 1154:756) */
  width: min(70vw, 560px, 84vh);
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  flex: 0 1 auto;
  min-height: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5vh clamp(20px, 9vw, 160px);
  flex: none;
}

.links a {
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.62rem, 2.4vmin, 1.05rem);
  padding: 0.5em 0.1em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.links a.icon {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.links a.icon svg {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  display: block;
}

.links a:hover,
.links a:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
  outline: none;
}

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

/* Celular vertical: logo más ancho y enlaces más juntos */
@media (max-width: 600px) {
  .logo { width: min(86vw, 84vh); }
  .links { gap: 1vh 5vw; }
  .links a { letter-spacing: 0.1em; font-size: clamp(0.62rem, 3.2vw, 0.9rem); }
}