:root{
  --blue:#147699;
  --purple:#61387a;
  --red:#701b1e;
  --olive:#706f22;
  --muted:rgba(255,255,255,.42);
  --side-margin:20vw;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  background:var(--blue);
  color:#fff;
  font-family:Georgia, 'Times New Roman', serif;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

.theme-purple{background:var(--purple)}
.theme-red{background:var(--red)}
.theme-olive{background:var(--olive)}

.wrap{
  display:grid;
  grid-template-columns:220px 230px minmax(320px,1fr);
  gap:34px;
  padding:54px 64px;
}

.splash{
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:54px var(--side-margin);
}

.logo{
  font-size:82px;
  line-height:.72;
  font-weight:bold;
  letter-spacing:-3px;
}

.logo small{display:block;font-size:.58em}

.tagline{
  margin-top:40px;
  font-size:21px;
  font-style:italic;
  max-width:780px;
}

.menu{
  margin-top:42px;
  font-size:22px;
  font-weight:bold;
  line-height:1.12;
}

.menu a,
.subnav a,
.list a{
  display:block;
  color:var(--muted);
}

.menu a.active,
.menu a:hover,
.subnav a.active,
.subnav a:hover,
.list a.active,
.list a:hover{
  color:#fff;
  text-decoration:none;
}

.subnav{
  margin-top:192px;
  font-size:19px;
  font-weight:bold;
  line-height:1.08;
}

.list{
  font-size:20px;
  font-weight:bold;
  line-height:1.05;
}

.count{
  font-size:.55em;
  opacity:.55;
  font-weight:normal;
}

.content{
  grid-column:1 / -1;
  width:calc(100vw - (var(--side-margin) * 2));
  margin:0 var(--side-margin);
  padding-top:80px;
  font-size:22px;
  line-height:1.26;
  scroll-margin-top:40px;
}

.content:first-child,
.wrap > section:empty + section.content{
  padding-top:140px;
}

.quote{
  margin:0 0 44px;
  text-align:right;
  font-size:21px;
  font-style:italic;
}

.quote .author{
  display:block;
  margin-top:22px;
  font-size:.95em;
  font-weight:bold;
}

.admin{
  font-family:system-ui,Segoe UI,sans-serif;
  background:#f7f7f7;
  color:#222;
  padding:30px;
}

.admin a{color:#0645ad}
.admin table{border-collapse:collapse;width:100%;background:#fff}
.admin th,.admin td{border:1px solid #ddd;padding:8px;vertical-align:top}
.admin input,.admin textarea,.admin select{width:100%;padding:8px}
.admin textarea{min-height:140px}
.admin .actions{white-space:nowrap}

.button{
  display:inline-block;
  padding:8px 12px;
  background:#222;
  color:#fff!important;
  border-radius:4px;
  text-decoration:none;
  border:0;
  cursor:pointer;
}

@media(max-width:850px){
  :root{--side-margin:32px}
  .wrap{display:block;padding:32px}
  .content{width:auto;margin:0;padding-top:40px}
  .subnav{margin-top:32px}
  .logo{font-size:58px}
  .menu{font-size:18px}
  .quote{font-size:17px;text-align:left}
}

/* Página De qué va: texto alineado con la altura del menú principal */
.content.menu-height{
  grid-column:2 / -1;
  grid-row:1;
  width:auto;
  margin:0;
  padding-top:140px;
}

@media(max-width:850px){
  .content.menu-height{
    width:auto;
    margin:0;
    padding-top:40px;
  }
}


.go-top{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:9999;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(0,0,0,.18);
  color:#fff;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .25s ease;
}

.go-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.go-top:hover{
  background:rgba(0,0,0,.32);
}

@media(max-width:850px){
  .go-top{
    right:18px;
    bottom:18px;
    width:42px;
    height:42px;
    font-size:17px;
  }
}